2017-06-14 63 views
0

使用gulp &使用'gulp.watch'的Gulp-sass,如何返回監視列表中已更改項目的目錄名稱,以便我可以將sass編譯爲css?編譯相應的gulp文件

這就是我目前所擁有的;正如你所看到的,只有一個目錄被編譯爲主題1.如果主題2或3在SASS中發生變化,主題1 css將被更新。我希望它是有條件的,以便任何一個根據不同的變化而變化。

'use strict'; 

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

gulp.task('sass', function() { 
    return gulp.src('./wp-content/themes/1/assets/sass/**/*.scss') 
     .pipe(sass.sync().on('error', sass.logError)) 
     .pipe(gulp.dest('./wp-content/themes/1/')); 
}); 

gulp.task('sass:watch', function() { 
    gulp.watch('./wp-content/themes/1/assets/sass/**/*.scss', ['sass']); 
    gulp.watch('./wp-content/themes/2/assets/sass/**/*.scss', ['sass']); 
    gulp.watch('./wp-content/themes/3/assets/sass/**/*.scss', ['sass']); 
}); 

回答

0

雖然這是非常硬編碼,這是我剛剛找到的解決方案。

'use strict'; 

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

gulp.task('sass', function() { 
    // return gulp.src('./wp-content/themes/giggleselc/assets/sass/**/*.scss') 
    //  .pipe(sass.sync().on('error', sass.logError)) 
    //  .pipe(gulp.dest('./wp-content/themes/giggleselc/')); 
}); 

gulp.task('sass:watch', function() { 
    var n1 = gulp.watch('./wp-content/themes/1/assets/sass/**/*.scss', ['sass']); 
    var n2 = gulp.watch('./wp-content/themes/2/assets/sass/**/*.scss', ['sass']); 
    var n3 = gulp.watch('./wp-content/themes/3/assets/sass/**/*.scss', ['sass']); 

    n1.on('change', function(f) { 
     return gulp.src('./wp-content/themes/1/assets/sass/**/*.scss') 
      .pipe(sass.sync().on('error', sass.logError)) 
      .pipe(gulp.dest('./wp-content/themes/1/')); 
    }); 
    n2.on('change', function(f) { 
     console.log('Change Event:', f); 
     return gulp.src('./wp-content/themes/2/assets/sass/**/*.scss') 
      .pipe(sass.sync().on('error', sass.logError)) 
      .pipe(gulp.dest('./wp-content/themes/2/')); 
    }); 
    n3.on('change', function(f) { 
     return gulp.src('./wp-content/themes/3/assets/sass/**/*.scss') 
      .pipe(sass.sync().on('error', sass.logError)) 
      .pipe(gulp.dest('./wp-content/themes/3/')); 
    }); 
});