Question

我需要在保存时将SASS文件编译为CSS文件，而不必将每个SASS文件编译为单个CSS文件。

我需要能力： - 在目录上运行“监视” - 如果保存文件，则会创建其名称的CSS。示例：'main.scss'编译为'main.css'。 - 如果不需要，它不应该编译每一个SASS。

目标是优化开发过程，以避免在“观看”时编译目录中的每个SASS文件。

我当前的SASS任务看起来有点像这样，导致一个CSS文件：

//Compile Sass
gulp.task('styles', function() {
  return gulp.src('app/scss/styles.scss')
    .pipe(plugins.sass({ includePaths : [paths.sass], style: 'compressed'})
    .pipe(plugins.autoprefixer('last 2 version'))
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.minifyCss())
    .pipe(gulp.dest('build/css'));
});

Answer 1

看起来gulp-changed是您正在寻找的内容：
https://github.com/sindresorhus/gulp-changed

您将其添加为npm install --save-dev gulp-changed的依赖项并将其插入您的gulpfile。从改变后的自述文件：

var gulp = require('gulp');
var changed = require('gulp-changed');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example

var SRC = 'src/*.js';
var DEST = 'dist';

gulp.task('default', function () {
    return gulp.src(SRC)
        .pipe(changed(DEST))
        // ngAnnotate will only get the files that
        // changed since the last time it was run
        .pipe(ngAnnotate())
       .pipe(gulp.dest(DEST));
});

使用Gulp编译每个SASS文件，创建多个CSS文件

1 个答案: