A-A+

解决Gulp task执行的先后依赖以及先后顺序

2017年05月23日 javascript 暂无评论 阅读 25 views 次

我想执行的工作流程是

1.监控tpl中html文件变化-->复制tpl中的html文件到dist目录下-->刷新html文件版本号-->刷新浏览器
2.监控less文件的变化-->清空dist/css目录下的所有css文件-->编译less-->刷新html文件版本号-->刷新浏览器
3.监控js的变化-->清空dist/js目录下的js文件-->复制src/目录下的js到dist/js下-->刷新html文件版本号-->刷新浏览器
4.监控res/目录下静态资源的变化-->复制res/img目录下的文件到dist/img目录下--刷新浏览器

其中1,2,3,4步骤没有先后顺序。但是每一条监控任务内部是要按照先后顺序执行的

  • 执行第2个任务的时候 必须是先清空文件 再编译less 最后刷新浏览器 如何控制这步骤的先后问题?

  • 还有一个问题就是 我写的browsersync刷新 是想在所有的编译工作完成后刷新 我期望是复制n个文件 完成后刷新1次 但是现在是复制n个文件完成后刷新了n次,这个问题如何解决?

最后附上我的gulpfile.js文件

var yargs        = require('yargs').argv,

        gulp         = require('gulp'),

        less         = require('gulp-less'),

        uglify       = require('gulp-uglify'),

        concat       = require('gulp-concat'),

        rename       = require('gulp-rename'),

        plumber      = require('gulp-plumber'),

        header       = require('gulp-header'),

        revAppend    = require('gulp-rev-append'),

        clean        = require('gulp-clean'),

        notify       = require('gulp-notify'),

        minifycss    = require('gulp-minify-css'),

        autoprefixer = require('gulp-autoprefixer'),

        Browsersync  = require('browser-sync').create();



var pkg          = require('./package.json');

var banner       = ['/**',

                                        ' * <%= pkg.name %>',

                                        ' * @Version: v<%= pkg.version %>',

                                        ' * @Author : ray0324',

                                        ' * @QQ     : 545886131',

                                        ' * @E-mail : ray0324@foxmail.com',

                                        ' *',

                                        ' */',

                                        'n'].join('n');





/*删除旧的css文件件*/

gulp.task('clean-css', function () {

        return gulp

                        .src(['dist/css/**/*.css'], {read: false})

                        .pipe(clean());

});



/*删除旧的js文件件*/

gulp.task('clean-js', function () {

        return gulp

                        .src(['dist/js/**/*'], {read: false})

                        .pipe(clean());

});



/* 构建less */

gulp.task('build-less',['clean-css'], function() {

        return gulp

                        .src(['less/admin.less'])

                        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))

                        .pipe(less())

                        .pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false}))

                        .pipe(header(banner, {pkg : pkg }))

                        .pipe(gulp.dest('dist/css/'));

});





/* 构建js */

gulp.task('build-js',['clean-js'],function(){

        return gulp

                        .src(['src/**/*.js'])

                        .pipe(gulp.dest('dist/js/'))

})





/* 移动文件 */

gulp.task('source',function(){

        return gulp

                        .src('res/img/**/*')

                        .pipe(gulp.dest('dist/img/'));

})





gulp.task('copy-html',function() {

        return gulp

                        .src('tpl/**/*.html')                                     

                        .pipe(gulp.dest('dist/'));



});



/* 更新文件版本 添加MD5 */

gulp.task('rev-html',['copy-html'],function() {

        return gulp

                        .src('dist/**/*.html')

                        .pipe(revAppend())                                       

                        .pipe(gulp.dest('dist/'));

});





/* 启动一个服务器 */

gulp.task('serve', function() {

        Browsersync.init({

                open: 'external',  //用局域网ip打开

                server: {

                        baseDir: "./dist",

                        directory: true

                }

        });

});





/* 监控文件变化 */

gulp.task('watch', function () {

        gulp.watch('./less/*.less', ['build-less','rev-html']);

        gulp.watch('./tpl/**/*.html',['rev-html']);

        gulp.watch('./src/**/*.js',['build-js','rev-html']);

});







gulp.task('default', function () {



    gulp.start('serve');

    gulp.start('watch');

        // if (yargs.s) {

        //         gulp.start('serve');

        // }



        // if (yargs.w) {

        //         gulp.start('watch');

        // }

});

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: