Gulp任务发布

Question

我是Gulp的新手.我正在尝试构建一个发布到dist文件夹.项目结构如下:

_untitled/
 ??? app/
     ??? img/
     ??? jade/
     ??? script/
     ??? style/
     ??? vendor/
     ??? 404.html
     ??? index.html
 ??? node_modules/
 ??? gulpfile.js
 ??? package.json

这是我的gulpfile.js:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

//-------------------- jade
gulp.task('jade', function () {
    return gulp.src('app/jade/*.jade')
    .pipe($.jade({
        pretty: true
    }))
    .on('error', console.log)
    .pipe(gulp.dest('app'))
    .pipe($.size());
});

//-------------------- style
gulp.task('style', function () {
    return gulp.src('app/style/sass/main.scss')
    .pipe($.rubySass({
        style: 'expanded',
        'sourcemap=none': true,
        noCache: true
    }))
    .pipe($.autoprefixer({
            browsers: ['last 2 versions']
        }))
    .pipe(gulp.dest('app/style'))
    .pipe($.size());
});

//-------------------- script
gulp.task('script', function () {
    return gulp.src('app/script/**/*.js')
    .pipe($.jshint())
    .pipe($.jshint.reporter(require('jshint-stylish')))
    .pipe($.size());
});

//-------------------- htmlDist
gulp.task('htmlDist', function () {
    return gulp.src('app/**/*.html')
    .pipe(gulp.dest('dist'))
    .pipe($.size());
});

//-------------------- styleDist
gulp.task('styleDist', function () {
    return gulp.src('app/style/**/*.css')
    .pipe($.concat('main.css'))
    .pipe($.csso())
    .pipe(gulp.dest('dist/style'))
    .pipe($.size());
});

//-------------------- scriptDist
gulp.task('scriptDist', function () {
    return gulp.src('app/script/**/*.js')
    .pipe($.uglify())
    .pipe(gulp.dest('dist/script'))
    .pipe($.size());
});

//-------------------- cleanDist
gulp.task('cleanDist', function () {
    var del = require('del');
    return del('dist');
});

//-------------------- build
gulp.task('build', ['jade', 'style', 'script']);

//-------------------- buildDist
gulp.task('buildDist', ['htmlDist', 'styleDist', 'scriptDist']);

//-------------------- release
gulp.task('release', ['cleanDist', 'build', 'buildDist']);

有了这个,当我输入时gulp release我有一个ok dist文件夹,除了它index.html是空的和0 KB大小.然后,当我gulp release再次尝试制作时(第二次,dist文件夹已经存在),我只有404.html文件dist夹中的文件和以下输出的错误:

gulp release
[02:36:14] Using gulpfile D:\Coding\_untitled\gulpfile.js
[02:36:14] Starting 'cleanDist'...
[02:36:14] Finished 'cleanDist' after 52 ms
[02:36:14] Starting 'jade'...
[02:36:15] Starting 'style'...
[02:36:16] Starting 'script'...
[02:36:17] Starting 'htmlDist'...
[02:36:17] Starting 'styleDist'...
[02:36:17] Starting 'scriptDist'...
[02:36:17] all files 38 B
[02:36:17] Finished 'script' after 1.19 s
[02:36:17] all files 432 B
[02:36:17] Finished 'jade' after 2.88 s

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: ENOENT, chmod 'D:\Coding\_untitled\dist\script\main.js'

毕竟,如果我尝试制作gulp release(那将是第三个),dist文件夹甚至不会出现.index.html当dist文件夹不存在时,看起来这个任务运行得很好(不算空),然后它就会出错.我需要dist首先删除整个文件夹,然后构建一个版本.gulp buildDist单独运行工作正常(index.html是正常的).

这是我的第一篇文章,我已经尽力做到了.非常感谢任何帮助.

Answer 1

在gulp中指定依赖项时,它们并行运行,而不是按顺序运行.这意味着你的jade,style和script任务运行的同时为你htmlDist,styleDist和scriptDist任务.

您应该使用run-sequence包来确保您的任务按顺序运行.

var runSequence = require('run-sequence');

gulp.task('build', function(callback) {
  runSequence('cleanDist', 'build', 'buildDist', callback);
});