Question

我刚刚开始使用browsersync。所以我开始学习gulp。我使用npm install gulp -g命令安装了gulp。在此之后，我通过以下命令package.json使用npm init文件初始化了我的项目目录。然后我通过npm install gulp --save-dev命令在我的项目目录中安装了gulp。我还通过npm install browser-sync --save-dev命令安装了browsersync。

现在我尝试使用gulp gulp browser-sync命令运行browsersync，这会给我一个错误任务'browser-sync'不在你的gulpfile中

以下是我的gulpfiles.js文件

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// process JS files and return the stream.
gulp.task('js', function () {
  return gulp.src('js/*js')
    .pipe(browserify())
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
    browserSync.reload();
    done();
});

// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {

// Serve files from the root of this project
browserSync.init({
    server: {
        baseDir: "./"
    }
});

// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
  gulp.watch("js/*.js", ['js-watch']);
});

我已经尝试在gulpfile.js的开头和结尾添加module.exports = gulp;行，但错误仍然存在。我目前的gulp版本是mac OSX 10.12.3上的3.9.1

请帮助我被困住了。

Answer 1

问题是您将任务称为serve而不是browserSync：

// use default task to launch Browsersync and watch JS files
// NOTE how this task is called serve:
gulp.task('serve', ['js'], function () {

// Serve files from the root of this project
browserSync.init({
    server: {
        baseDir: "./"
    }
});

你可以改变它的＆＃39;名：

// use default task to launch Browsersync and watch JS files
// NOTE at the name of the task now
gulp.task('browser-sync', ['js'], function () {

// Serve files from the root of this project
browserSync.init({
    server: {
        baseDir: "./"
    }
});

任务'browser-sync'不在你的gulpfile中

1 个答案: