Gulp 任务发布答案

【问题标题】：Gulp task to make a releaseGulp 任务发布
【发布时间】：2014-11-12 01:08:26
【问题描述】：

我是 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 时，我有一个好的dist 文件夹，除了index.html 是空的并且0 KB 大小。然后，当我再次尝试创建gulp release 时（第二次，dist 文件夹已经存在），我在dist 文件夹中只有404.html 文件，并且出现以下输出错误：

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 文件夹甚至不会出现。当dist 文件夹不存在时，看起来这个任务运行得很好（不包括空的index.html），然后它就出错了。好吧，我需要先完成这个任务来删除整个dist 文件夹，然后再构建一个版本。单独运行gulp buildDist 工作正常（index.html 是正常的）。

这是我的第一篇文章，我已经尽力做到了。将不胜感激任何帮助。

【问题讨论】：

标签： javascript node.js task gulp

【解决方案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);
});

【讨论】：

【解决方案2】：

根据Gulp documentation，你不需要任何第三方包，

只需创建依赖任务：

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});

gulp.task('default', ['one', 'two']);

【讨论】：