gulp 回调冲突 怎么解决？？

Question

var rjs = require('gulp-requirejs');
var minifycss = require('gulp-minify-css'),// CSS压缩
    uglify = require('gulp-uglify'),// js压缩
    concat = require('gulp-concat'),// 合并文件
    rename = require('gulp-rename'),// 重命名
    clean = require('gulp-clean');//清空文件夹

var gulp = require('gulp'),
    less = require('gulp-less');
    notify = require('gulp-notify'),
    plumber = require('gulp-plumber');
    browserSync = require('browser-sync').create(),
    reload     = browserSync.reload;

var cssfiles = [
    'src/css/base.css',
    'src/css/index.css'
];

gulp.task('css-index', function() {
    gulp.src(cssfiles)
        .pipe(concat('index.merge.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('src/dist/css/'));
});

gulp.task('js-index', function() {
    rjs({
        baseUrl: "src/js",
        paths: {
            'jquery': 'lib/bower_components/jquery/dist/jquery.min'
        },
        name: "build",
        out: "index.merge.min.js"
    })
        .pipe(uglify())
        .pipe(gulp.dest("src/dist/js"));

    gulp.src("src/js/require2.1.21.js")
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('src/dist/js'));

});

gulp.task('serve', ['Less'], function() {
    browserSync.init({
        server: "./src"
    });
    gulp.watch("src/**/*.less", ['Less']);
    gulp.watch("src/*.html").on('change', reload);
});
gulp.task('Less', function() {
    return gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less'])
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
        .pipe(less())
        .pipe(gulp.dest("src/css"))
        .pipe(reload({stream: true}));
});

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

gulp.task('watch', ['js-index', 'css-index'], function() {
    browserSync.reload();
});

gulp.task('localserver',['serve'],function() {
    gulp.watch(['src/**/*.css', 'src/**/*.js', 'src/**/*.html'], ['watch']);
});
gulp.task('default', ['css-index', 'js-index']);

要实现的效果就是我修改less能输出css，同时css或者js变化了，选定的文件要能执行压缩的方法。

备注：js-index：压缩js；css-index：压缩css；serve：监听less文件变化；watch：监听css|js|html的变化

步骤：
1.启动localserver方法
2.修过某个less文件
3.页面效果改变了
4.每ctrl+s一次
5.webstorm控制台一直提示starting.."watch"方法在执行
问题：
样式加载，有时成功，有时失败。每次执行方法后页面一直在重载。
不知道是什么原因。

哪位大神能帮我改良下我的代码，感激不尽。

Answer 1

没敢大改，稍微梳理一下，因为gulp好久不用了，你自己试试，应该可以用：

var rjs = require('gulp-requirejs');
var minifycss = require('gulp-minify-css'), // CSS压缩
    uglify = require('gulp-uglify'), // js压缩
    concat = require('gulp-concat'), // 合并文件
    rename = require('gulp-rename'), // 重命名
    clean = require('gulp-clean'); //清空文件夹

var gulp = require('gulp'),
    less = require('gulp-less'),
    notify = require('gulp-notify'),
    plumber = require('gulp-plumber'),
    merge = require('merge-stream'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload;

var cssfiles = ['src/css/base.css', 'src/css/index.css'];

//这里看起来css-index 依赖Less
gulp.task('css-index', ['Less'], function() {
    return gulp.src(cssfiles)
        .pipe(concat('index.merge.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('src/dist/css/'));
});

gulp.task('js-index', function() {
    var js = rjs({
        baseUrl: 'src/js',
        paths: {
            'jquery': 'lib/bower_components/jquery/dist/jquery.min'
        },
        name: 'build',
        out: 'index.merge.min.js'
    })
        .pipe(uglify())
        .pipe(gulp.dest('src/dist/js'));

    var req = gulp.src('src/js/require2.1.21.js')
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('src/dist/js'));

    return merge(js, req);
});

// 这段感觉没什么用
// gulp.task('serve', ['Less'], function() {
//     browserSync.init({server: './src'});
//     gulp.watch('src/**/*.less', ['Less']);
//     gulp.watch('src/*.html').on('change', reload);
// });

gulp.task('Less', function() {
    return gulp.src(['src/less/*.less', '!src/less/extend/{reset,test}.less'])
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        .pipe(less())
        .pipe(gulp.dest('src/css'))
        .pipe(reload({stream: true}));
});

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

gulp.task('watch', ['js-index', 'css-index'], function() {
    browserSync.reload();
});

//这里这么改改，先把less、js
gulp.task('localserver', ['js-index', 'css-index'], function() {
    browserSync.init({
        server: "./src"
    });
    gulp.watch(['src/**/*'], ['watch']);
});

gulp.task('default', ['css-index', 'js-index']);

补充：

首先讲下为什么要merge, merge的目的是将两个stream合并，处理最终的结束事件，这样依赖js-index的其他任务才能正确处理接下来的任务。否则可能造成watch的死循环。

再说为什么我加了merge也不工作，这是因为gulp-requirejs自己的bug, 看这里:Does not validly close stream，并且作者长时期未响应群众号召，拒绝修复此bug。所以我个人建议这里直接使用r.js，不要再用gulp-requirejs了

Answer 2

你执行reload的地方太多了吧。。。
task:serve里发现src/*.htm"变化reload一次
task:less里发现less有变化reload一次
task:watch里又reload一次

Answer 3

来捋一捋。

1.启动 localserver 任务，修改一个文件
2.匹配到文件修改，进入 watch 任务
3.watch 依赖 'js-index' 和 'css-index' 任务，进入这两个任务
4.这两个任务由于都有 dest 文件生成，等于又触发了文件修改，又回到了第 2 步

我不是很明白你为什么把 dist 目录放到 src 中。你 watch 的是 src 下的文件，每次生成文件到 dist 中都会触发文件修改，进入循环。

Answer 4

js-index 这个方法我看你加了return merge(js, req); 为什么还要把这两个压缩的js再合并呢，rjs和req产生的js要单独输出啊。