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

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

我需要利用它来自动化编译sass文件并将其发布到bundle.css文件的过程

为了做到这一点，以下是我所做的

安装在我的机器上

使用

npm安装-g gulp全球安装

在项目的根项目中创建了一个名为

gulpfile.js

的文件

使用

npminit

命令创建

package.json

文件

通过从我的项目根目录执行以下命令，将gulp添加到我的开发依赖项

npm install gulp--save dev

将下面的代码添加到my

gulpfile.js

从命令控制台，我启动了显示以下信息的

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'))
);

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'));
});

我错过了什么？每次保存后，如何让被监视者监视并启动任务

已更新

我从使用

gulprubysass

插件切换到使用。现在，每次保存

scss

文件时，我都要运行该任务，但由于某些原因，它不会更新目标文件

下面是我的

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'))
);

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'));
});

---

您可能缺少大口手表的要求：

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

发件人：

// 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);

    }));

});

watch（glob，[options，callback]）创建一个监视程序，监视 由glob匹配的文件，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);

    }));

});

---

编辑：

您可以在“任务运行器资源管理器”窗口中运行Visual Studio 2015中的任务

---

但是，如果您有一个运行“gulp watch”的提示，当它检测到您正在查看的文件的更改时，无论这些文件在何处编辑，它应该具有相同的效果并运行您的编译任务。

您可能缺少gulp watch的要求：

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

发件人：

// 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);

    }));

});

watch（glob，[options，callback]）创建一个监视程序，监视 由glob匹配的文件，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);

    }));

});

---

编辑：

您可以在“任务运行器资源管理器”窗口中运行Visual Studio 2015中的任务

---

但是，如果您有一个运行“gulp watch”的提示，当它检测到您正在监视的文件的更改时，无论这些文件在何处编辑，它都应该具有相同的效果并运行编译任务。

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

GULP。在ZURB基金会6项目中使用（）、

查看和<代码> GULP加载插件<代码> > 注意，

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

需要检查的基本内容包括文件夹位置、文件名和读/写权限

 GULP。在ZURB基金会6项目中使用（）、
查看和<代码> GULP加载插件<代码> >
注意，
.pipe（gulp.dest（'../your/path/css'）
不包括
~
或指定文件名或扩展名。它只指定一条路径。放置在该路径中的文件的默认名称为
style.css
，因为源文件名为
style.scss
。参见第
行gulp.src（'scss/style.scss'）

我不确定gulp是否理解路径中的瓷砖（
~
）。尝试使用
/
而不是
~/
启动路径。另外，我将验证直接调用时（不带手表）您的
compileSass
任务是否按预期工作。感谢您提供的有用提示！现在，将
~
更改为
后，我收到一个新错误。以下是错误
“sass”未被识别为内部或外部命令、可操作程序或批处理文件。插件“gulp ruby sass”消息中出错：未安装Gem undefined。
如果要使用
gulp ruby sass
，您可能需要在计算机上安装ruby和sass Gem-请参阅。不过，您可能会发现它更容易使用，除非您有充分的理由使用GulpRuby sass。@SergeyK谢谢。我切换到使用
gulp scss
，现在每次我用扩展名
scss
保存一个文件时，我都能在控制台中看到一行新代码，上面写着
启动
编译sss
。。。。已完成
compilesss`但未填充文件bundle.css。是的，我在site.scss文件中添加了代码