7

だから私はGulp Sass（gulp-changed更新された構文の変更でgulp-newerも試しました）scss使用し、フォルダー内のすべてのファイルを監視しています。

ベースscssファイルを変更すると、問題なくコンパイルされます。

ただし、パーシャルを変更すると、そのパーシャルに依存する sass ファイルはコンパイルされません。

ゴクゴク

var SRC = './stylesheets/**/*.scss';
var DEST = './stylesheets';
gulp.task('sass', function() {
  return gulp.src(SRC)
    .pipe(changed(DEST, { extension: '.css' }))
    .pipe(plumber({
        errorHandler: handleErrors
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
            includePaths: [
                'C:/var/www/mobile 2/stylesheets'
    ]}))
    .pipe(sourcemaps.write('./'))
    .on('error', handleErrors)
    .pipe(gulp.dest(DEST))
});

フォルダ

├── scss
│    └── base.scss
│          ├── _partial1.scss
│          └── _partial2.scss
│          └── anotherBase.scss
│                 ├── _anotherBasePartial1.scss
│                 └── _anotherBasePartial2.scss

行われた変更にbase.scss || anotherBase.scss変更を加える、何も変更しpartial1.scssない。

ログでわかるように：

[15:14:02] Starting 'sass'... //here i changed _partial1.scss
[15:14:03] Finished 'sass' after 248 ms
[15:18:20] Starting 'sass'...
[15:18:20] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\base.css
[15:18:24] Starting 'sass'...
[15:18:24] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\anotherBase.css

パーシャルが変更されるたびにscssをコンパイルしたいと思います。

4

6 に答える 6

5

ショーには少し遅れましたが、私があなたのことを正しく理解していれば; 部分的であるかどうかにかかわらず、scss ファイルを変更したときにビルドを実行したいですか? (ただし、sass @import によって処理されるため、ビルド自体にパーシャルは含まれません)。

私は通常、このアプローチを使用します。

var scss_source = [ 'path/to/scss' ],
    partials_source = [ 'path/to/partials' ];

gulp.task('scss', function () {
    gulp.src( scss_source )
    ...
});

var scss_watcher = gulp.watch([ scss_source, partials_source ], [ 'scss' ]);

ビルドには scss_source のみを渡しますが、ウォッチャーには両方のソースを渡します。そうすれば、残りの scss ソースからすべてのパーシャルを分離できますが、いずれかのファイルを変更するとビルドがトリガーされます。そして、これを処理するためにさらに別のモジュールを含める必要はありません。

私は通常、パーシャル ファイルを別のディレクトリに保存します (共有し、他の scss ファイルと混合しないと考えてください)。

これがあなたの場合に当てはまることを願っています-そうでない場合はお詫び申し上げます。

于 2016-06-18T08:17:27.953 に答える
0

これは、何よりもパーシャルをどのようにインクルードしているかに関係している可能性があります - @imported パーシャルをベース sass ファイルに入れましたか?

つまり、base.scss には

@import 'partial1';
@import 'partial2';

そこのどこか？

編集

さて、同様の問題に遭遇しました.gulp-newer +配列をループしてgulpタスクを生成するだけで終わりました。だから、それは次のように見えました

var sassMain = ['base', 'anotherBase'];
sassMain.forEach(current, function() {
    var src = current + '.scss';        

    return gulp.src(src)
      .pipe(newer(destination)
      .pipe(plumber())
      .pipe(sass())
      .pipe(gulp.dest(destination))
});

世界で最も柔軟なものではありませんが (特にベース URL のネストされたディレクトリを使用する場合)、目的の場所に到達できます。gulp-cached も、このトリッキーなしで目的の場所にほぼ到達しますが、同じようにコンパイルされないという問題があります。

于 2015-06-09T14:29:34.963 に答える
0

https://www.npmjs.com/package/gulp-changed

デフォルトでは、ストリーム内のファイルが変更されたかどうかのみを検出できます。

おそらくこれが必要だと思います：https://github.com/floatdrop/gulp-watch

于 2015-06-10T17:54:18.130 に答える
0

https://github.com/vigetlabs/gulp-starterをテンプレートとしてhttps://github.com/berstend/gulp-sass-inheritanceで使用します

それは機能しますが、2レベルの深さでのみ機能します 

var gulp            = require('gulp');
var debug           = require('gulp-debug');
var browserSync     = require('browser-sync');
var sass            = require('gulp-sass');
var sourcemaps      = require('gulp-sourcemaps');
var handleErrors    = require('../lib/handleErrors');
var autoprefixer    = require('gulp-autoprefixer');
var path            = require('path');
var cached          = require('gulp-cached');
var sassInheritance = require('gulp-sass-inheritance');
var gulpif          = require('gulp-if');
var filter          = require('gulp-filter');
var duration        = require('gulp-duration');
var notify          = require('gulp-notify');

var paths = {
    src : 'app/styles',
    dest: 'grails-app/assets'
}


var isPartial = function (file) {
    return /_/.test(file.relative);
}

//set global.isWatching = true on gulp watch

gulp.task('css', function () {
    return gulp.src(paths.src)
        //.pipe(debug({title: 'before cache:'}))
        .pipe(gulpif(global.isWatching, cached('sass')))
        //.pipe(gulpif(global.isWatching, debug({title: 'after cache:'})))
        .pipe(gulpif(isPartial, sassInheritance({dir: path.join(config.root.src, config.tasks.css.src), debug: false}).on('error', handleErrors))) //,
        .pipe(debug({title: 'after sassInheritance:'}))         
        //.pipe(debug({title: 'after filter:'}))
        .pipe(sourcemaps.init())
        .pipe(sass()).on('error', handleErrors)
        .pipe(debug({title: 'after sass:'}))
        //.pipe(notify('Sass compiled <%= file.relative %>'))
        .pipe(autoprefixer(config.tasks.css.autoprefixer))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.dest))
        //.pipe(duration('after sass'))
        .pipe(debug({title: 'before browserSync:'}))
        .pipe(browserSync.reload({stream: true}))
})
于 2015-11-05T23:50:38.320 に答える