如何让 gulp 观察我的 sass 文件更改并创建一个 css 文件？

Question

我正在开发一个使用 ASP.NET MVC 5 框架开发的应用程序。我正在使用 Visual Studio 2013 编写我的应用程序。

我需要使用gulp 来自动编译我的 sass 文件并将它们发布到 bundle.css 文件中。

要做到这一点，这就是我所做的

1. 在我的机器上安装了NodeJs
2. 使用npm install -g gulp 全局安装gulp
3. 在项目的根项目中创建了一个名为gulpfile.js的文件
4. 使用npm init 命令创建了package.json 文件
5. 通过从我的项目npm install gulp --save-dev 的根目录执行以下命令，将 gulp 添加到我的开发依赖项中
6. 将以下代码添加到我的gulpfile.js

7. 我从命令控制台触发了gulp 命令，显示以下信息

   使用 gulpfile ...gulpfile.js

   开始“观看”...

   21 毫秒后完成“观看”

   开始“默认”...

   31 µs 后完成“默认”

但是当我将代码写入我的 ~/Assets/Sass/**/*.sass 时，没有任何东西可以按预期保存到 ~/Public/Css/bundle.css 中

这是gulpfile.js 的样子

const gulp = require('gulp'),
      sass = require('gulp-ruby-sass');

// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);

// listener task
gulp.task('watch', function(){

    //Watch any change in the sass directory and trigger the "compileSass" for every save
    gulp.watch('~/Assets/Sass/**/*.sass', ['compileSass']);

});

// Task to compile the sass files
gulp.task('compileSass', () =>
    sass('~/Assets/Sass/**/*.sass')
        .on('error', sass.logError)
        .pipe(gulp.dest('~/Public/Css/bundle.css'))
);

我在这里缺少什么？每次保存后如何让被监视者观看并触发任务？

更新

我从使用gulp-ruby-sass 插件切换到使用gulp-scss。现在，我每次保存 scss 文件时都会运行任务，但由于某种原因它不会更新目标文件。

这是我的gulpfile.js 文件的样子

const gulp = require('gulp'),
      scss = require('gulp-scss');

// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);

// listener task
gulp.task('watch', function(){

    //Watch any change in the "Sass" directory and trigger the "compileScss" for every save
    gulp.watch('./Assets/Scss/**/*.scss', ['compileScss']);

});

// Task to compile the "Scss" files
gulp.task('compileScss', function () {
    gulp.src('./Assets/Scss/**/*.scss')
        .pipe(scss({ "bundleExec": true }))
        .pipe(gulp.dest('./Public/Css/bundle.css'));
});

Answer 1

您可能缺少 gulp-watch 的 要求：

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

来自gulp-watch：

watch(glob, [options, callback]) 创建一个监视者 由 glob 匹配的文件，可以是 glob 字符串或数组 全局字符串。

返回将发出乙烯基文件的直通流（带有 附加事件属性）对应于文件系统上的事件。

你必须提供一个函数。这意味着任务名称是不够的。

尝试使用 gulp-batch 在手表上运行一些任务：

npm install gulp-batch --save-dev

您的观看任务：

// listener task
gulp.task('watch', function(){

   var watch = require('gulp-watch');
   var batch = require('gulp-batch');

    //Watch any change in the sass directory and trigger the "compileSass" for every save
    watch('~/Assets/Sass/**/*.sass', batch(function (events, done) {
        // run your compileSass task
        gulp.start('compileSass', done);

    }));

});

---

编辑：

您可以在“Task Runner Explorer”窗口中从 Visual Studio 2015 运行任务。

但是，如果您有一个提示运行 gulp-watch，它应该具有相同的效果，并在检测到您正在观看的文件的更改时运行您的编译任务，无论它们是在哪里编辑的。

Answer 2

要检查的基本事项是文件夹位置是否存在、文件名和读/写权限。

示例 gulpfile.js 在 Zurb Foundation 6 项目中使用 gulp.watch 和 gulp-load-plugins (foundation-cli)。

注意.pipe(gulp.dest('../your/path/css')); 不包括 ~ 或指定文件名或扩展名。它只指定一个路径。放置在该路径中的文件的默认名称为style.css，因为源文件名称为style.scss。见gulp.src('scss/style.scss')行。

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

// Multiple locations of SCSS to combine
var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/style.scss')           // SCSS Source file
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'compressed'               // if css compressed **file size**
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('../your/path/css'));     // OUTPUT Destination
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);   // FILES to Watch
});