gulp 3.0 & 4.0 | watch task has to be a function问题

gulpfile.js

var gulp =require("gulp");
var sass = require("gulp-sass");

gulp.task('sass',()=>{
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});


gulp.task('watch',()=>{
    gulp.watch('app/scss/**/*.scss', ['sass']);
});

复制代码

报错:

分析：

这个是因为require引入的包的版本问题致使的。在不一样的版本里，接口参数发生了变化。在gulp4.0以后已经只能接受watch第二个参数必须为函数。详情请看官网

方法一：

查看版本:

下载或修改本地的Gulp版本为3.9.1：

成功解决：

方法2、

修改gulpfile.js

var gulp =require("gulp");
var sass = require("gulp-sass");

gulp.task('sass',()=>{
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});


gulp.task('watch',()=>{
    gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
});

复制代码

想了解gulp.series请访问：www.npmjs.com/package/und…

问题解决：

扩展：Browser Sync自动刷新

使用4.0可能会报错：

还好如今已经修改为3.9.1了

安装 browser-sync ：

npm install browser-sync --save-dev
复制代码

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
var browserSync = require('browser-sync');

gulp.task('sass', () => {
    return gulp.src('app/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

//先把browserSync和Sass任务执行了再说
gulp.task('watch',['browserSync','sass'], () => {
    gulp.watch('app/scss/**/*.scss', ['sass']);
});

//建立一个broswerSync任务
gulp.task('browserSync', () => {
    browserSync({
        server: {
            baseDir: 'app'
        },
    })
});
复制代码

成功,浏览器的显示的页面为app/index.html。你修改了styles.scss以后，浏览器将自动属性页面

可从《How do I resolve "Cannot find module" error using Node.js? - Stack Overflow》继续了解!!!