使用gulp打造一个自动化的前端项目,如下代码:
//导入你所需要用的工具包 require('node_modules里对应模块')
var gulp = require('gulp'),
sass = require('gulp-sass'),
del = require('del');
// sass 任务
gulp.task('sass',function(){
gulp.src('./src/sass/*.scss') //获取该任务需要的文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest('./dist/css'))
})
// 默认任务
gulp.task('default',['clean'],function(){
gulp.start('sass','watch1');
})
// clean任务:
gulp.task('clean',function(cb){
del(['./dist'],cb)
})
//监听文件
gulp.task('watch1',function(){
return gulp.watch('./src/sass/*.scss',['sass']);
//监听 ./src/sass/*.scss 文件,修改时自动执行 sass 任务。
});
执行gulp
命令后,并不是执行默认任务,而只是执行clean清除任务,将dist文件夹给删除,然后就结束了,sass/watch1任务并不会执行。
需要再次输入gulp sass
或gulp watch1
才会执行相应的任务。
问题:
gulp.task('default',['clean'],function(){
gulp.start('sass','watch1');
})
这段代码不是执行默认任务,即先执行clean任务后,再继续执行sass/watch1任务吗?
怎么执行不了呢?
改:
//导入你所需要用的工具包 require('node_modules里对应模块')
var gulp = require('gulp'),
sass = require('gulp-sass'),
del = require('del');
// sass 任务
gulp.task('sass', ['clean'], function(){
return gulp.src('./src/sass/*.scss') //获取该任务需要的文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest('./dist/css'))
})
// 默认任务
gulp.task('default',['sass', 'watch1'],function(){
})
// clean任务:
gulp.task('clean',function(cb){
return del(['./dist']);
})
//监听文件
gulp.task('watch1', ['clean'], function(){
return gulp.watch('./src/sass/*.scss',['sass']);
//监听 ./src/sass/*.scss 文件,修改时自动执行 sass 任务。
});