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》繼續瞭解!!!