Question

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

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

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

在我的计算机上安装NodeJs
使用npm install -g gulp

gulp

在项目的根项目中创建了一个名为gulpfile.js的文件
使用package.json命令

npm init

通过从项目的根目录npm install gulp --save-dev
将以下代码添加到我的gulpfile.js
在命令控制台中，我解除了gulp命令，该命令显示以下信息

使用gulpfile ... gulpfile.js

开始'观看'......

21 ms后完成“观看”

开始'默认'......

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字符串或数组   glob strings。

返回将传输乙烯基文件的传递流（带有   附加事件属性）对应于文件系统上的事件。

你必须提供一个功能。意味着任务名称不够用。

尝试使用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);

    }));

});

编辑：

您可以在＆＃34; Task Runner Explorer＆＃34;中运行Visual Studio 2015中的任务。窗口。

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

Answer 2

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

使用（foundation-cli）在Zurb Foundation 6项目中使用SELECT description as FOOD, price, price_increase iif( price_increase/price < .10 or price_increase is null, 'Less than 10% Increase', iif(price_increase/price > .15 , 'Greater that 15% increase ', ' ' ) ) from l_foods where (price_increase/price) < .10 or price_increase is null, or (price_increase/price) > .15 order by description;和gulp.watch的示例gulpfile.js。

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

gulp.src('scss/style.scss')

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

2 个答案: