我在编译我的CSS时遇到问题,当我在我的SASS文件中进行更改时,它不会在尝试多次之后更改最终文件 .
var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//CSS Tasks
gulp.task('styles', function() {
console.log("Compilling SASS");
gulp.src('app/sass/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([ autoprefixer() ]))
.pipe(rename('999_style.css'))
.pipe(gulp.dest('app/css/'));
});
gulp.task('stylescompress', ['styles'], function() {
console.log("Concating and moving all the css files in styles folder");
gulp.src("app/css/**.css")
.pipe(concat('style.css'))
.pipe(postcss([ cssnano() ]))
.pipe(gulp.dest('css/'));
});
//Javascript Tasks
gulp.task('jscompress', function() {
//console.log("Concating and moving all the js files in javascript folder");
gulp.src("app/js/**.js")
.pipe(concat('scripts.js'))
.pipe(gulp.dest('js/'))
.pipe(rename('scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest('js/'))
});
//Watch task
gulp.task('default',function() {
gulp.watch(['app/sass/**/*.scss'],['stylescompress'])
.on('change', function(event) {
console.log('SASS - File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.watch(['app/js/**/*.js'],['jscompress'])
.on('change', function(event) {
console.log('SCRIPTS - File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
正如你所看到的,我根据Gulp Docs使用了所有内容,但我没有发现发生了什么 .
2 回答
当它完成时我错过了一次返回,让Gulp理解它何时应该调用下一个任务,它记录在Gulp Docs中
当每个任务结束时,我使用流来让gulp了解,如下所示:
安装浏览器同步并添加
在您的sass任务中添加browserSync
然后添加“监视”任务
然后在你的'默认'
现在运行gulp watch :)