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

最新推荐文章于 2020-10-13 14:33:52 发布

weixin_33795806

最新推荐文章于 2020-10-13 14:33:52 发布

阅读量405

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c5f2eb7e51d457ffa36e18b

版权

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：

成功解决：

方法二、

修改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'
        },
    })
});
复制代码