Question

我正在使用Gulp中的任务来选择文件夹中的所有.js个文件，并将它们合并到另一个文件夹中的一个文件中。当我在gulp中键入terminal时，它会连接到服务器并合并.js个文件，但是当我保存在其中一个.js文件中时，它不会更新..

此外，即使我有一个必须在更改时重新加载浏览器的任务，它也没有。

var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var browserify = require('browserify');
var jquery = require('jquery');
var minify = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('connect',function(){
    connect.server({
       root: 'public',
        port: 4000
    });
});

//Save sass file to style.css
gulp.task('sass', function() {
    return sass('css/style.scss')
        .pipe(gulp.dest('public/css'))
        .pipe(reload({stream: true}));
});

gulp.task('javascript', function() {
    gulp.src('assets/js/**/*.js')
        .pipe(uglify()).on('error', errorHandler)
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./public/js'))
        .pipe(reload({stream: true}));
});

gulp.task('default', ['connect', 'watch']);


gulp.task('serve', ['sass', 'javascript'], function () {
    browserSync({
        proxy: 'http://localhost:4000'
    });
    gulp.watch('assets/sass/*.scss', ['sass', browserSync.reload]);
    gulp.watch('assets/js/**/*.js', ['javascript', browserSync.reload]);
});

gulp.task('default', ['serve', 'connect']);

function errorHandler (error) {
    console.log(error.toString());
    this.emit('end');
}

Answer 1

您可以简化browserSync.reload的使用方式。试试这个：

1）创建browserSync实例。将此var browserSync = require('browser-sync').create();替换为var browserSync = require('browser-sync'); var reload = browserSync.reload;。

2）删除您正在执行的任何地方.pipe(reload({stream: true}));。

3）接下来，修改您的＆＃34;服务＆＃34;任务。只有一行执行重新加载很不错。下面的最后一个gulp.watch()检查您的构建public目录是否有更改，如果有，则重新加载。无需为您的＆＃34; sass＆＃34;单独重新加载。和＆＃34; javascript＆＃34;任务。另请注意，我们正在调用browserSync.init()。

gulp.task('serve', ['sass', 'javascript'], function () {
    browserSync.init({
        proxy: 'http://localhost:4000'
    });
    gulp.watch('assets/sass/*.scss', ['sass']);
    gulp.watch('assets/js/**/*.js', ['javascript']);
    gulp.watch('public/**/*.{css,js}').on('change', browserSync.reload);
});

Javascript文件只合并一次，sass文件无法正常工作

1 个答案: