Javascript文件只合并一次，sass文件不起作用

Javascript files only merge once, sass files not working

本文关键字：文件 一次 不起作用 sass 合并 Javascript      更新时间：2023-09-26

我在Gulp中使用一个任务来选择文件夹中的所有.js文件，并将它们合并到另一个文件夹中的一个文件中。当我在terminal中键入gulp时，它会连接到服务器并合并.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');
}

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

1） 创建browserSync实例。通过替换var browserSync = require('browser-sync'); var reload = browserSync.reload;将其放在var browserSync = require('browser-sync').create();的顶部。

2） 在执行.pipe(reload({stream: true}));的任何位置删除。

3） 接下来，修改您的"服务"任务。只有一行执行重新加载是很好的。下面的最后一个gulp.watch()检查您的构建public目录是否有更改，如果有更改，它将重新加载。不需要为"sass"answers"javascript"任务分别重新加载。另外，请注意，我们正在调用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);
});
相关文章：