Gulp不得不两次工作

时间:2018-06-14 14:57:35

标签: javascript automation gulp gulp-watch gulp-uglify

我一直在开发一个程序,用gulp来自动缩小我的整个项目,并将src文件夹的所有内容复制到dist文件夹(缩小文件保留的位置),这样我就可以生成一个war文件。文件。

我正在观看src文件的更改,然后,每次更改我清理dist文件夹,缩小文件并复制到dist文件夹,但问题是,每次我更改文件并保存,它清理dist文件夹,但不会将缩小的文件复制到新的dist文件夹,只有当我第二次保存时,才会再次创建dist文件夹并将缩小的文件复制到它。

到目前为止,这是我的代码。



var gulp = require('gulp');
var inject = require('gulp-inject');
var webserver = require('gulp-webserver');
var htmlclean = require('gulp-htmlclean');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var del = require('del');
var war = require('gulp-war');
var zip = require('gulp-zip');
var gulpSequence = require('gulp-sequence');

var paths = {
    src: 'src/**/*',
    srcHTML: 'src/**/*.html',
    srcCSS: 'src/**/*.css',
    srcJS: 'src/**/*.js',

    tmp: 'tmp',
    tmpIndex: 'tmp/index.html',
    tmpCSS: 'tmp/**/*.css',
    tmpJS: 'tmp/**/*.js',

    dist: 'dist',
    distIndex: 'dist/index.html',
    distCSS: 'dist/**/*.css',
    distJS: 'dist/**/*.js'
};

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

gulp.task('serve', function () {
    return gulp.src(paths.tmp)
        .pipe(webserver({
            port: 3000,
            livereload: true
        }));
});

gulp.task('watch', ['serve'], function () {
    gulp.watch(paths.src, function (event) {
        gulpSequence('clean', 'copy:dist', 'inject:dist')(function (err) {
            if (err) {
                console.log(err);
            }
        });
    });
});

gulp.task('html:dist', function () {
    console.log('htmlMin');
    return gulp.src(paths.srcHTML)
        .pipe(htmlclean())
        .pipe(gulp.dest(paths.dist));
});

gulp.task('css:dist', function () {
    console.log('cssMin');
    return gulp.src(paths.srcCSS)
        .pipe(cleanCSS())
        .pipe(gulp.dest(paths.dist));
});

gulp.task('js:dist', function () {
    console.log('jsMin');
    return gulp.src(paths.srcJS)
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist));
});

gulp.task('copy:dist', ['html:dist', 'css:dist', 'js:dist'], function () {
    console.log('Copy');
});

gulp.task('inject:dist', function () {
    var css = gulp.src(paths.distCSS);
    var js = gulp.src(paths.distJS);
    console.log('Inject');
    return gulp.src(paths.distIndex)
        .pipe(inject(css, { relative: true }))
        .pipe(inject(js, { relative: true }))
        .pipe(gulp.dest(paths.dist));
});

gulp.task('build', ['inject:dist']);

gulp.task('clean', function () {
    console.log('Clean');
    del([paths.tmp, paths.dist]);
});

gulp.task('war', function () {
    gulp.src([paths.dist])
        .pipe(war({
            welcome: 'index.html',
            displayName: 'Grunt WAR',
        }))
        .pipe(zip('myApp.zip'))
        .pipe(gulp.dest("./dist"));
});




0 个答案:

没有答案
相关问题