Gulp任务发布
Gulp task to make a release
我是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
时,除了index.html
为空和0 KB
大小外,我有一个ok的dist
文件夹。然后,当我再次尝试制作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
正常)。
这是我的第一篇文章,我已经尽力把它做好了。如果有任何帮助,我将不胜感激。
当您在gump中指定依赖项时,它们将以并行方式运行,而不是按顺序运行。这意味着jade
、style
和script
任务与htmlDist
、styleDist
和scriptDist
任务同时运行。
您应该使用运行序列包来确保任务按顺序运行。
var runSequence = require('run-sequence');
gulp.task('build', function(callback) {
runSequence('cleanDist', 'build', 'buildDist', callback);
});
根据Gulp文档,您不需要任何第三方包
只创建依赖任务:
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']);
相关文章:
- 当使用Watchify时,Browserify+Babelify Gulp任务没有终止
- gulp Iconify任务抛出错误TypeError:Path必须是字符串.收到false
- Gulp Git首先运行提交任务,然后运行推送任务
- Gulp复制任务完成后如何执行通知
- 如何在Gulp任务中拆分文件
- 多个 js 库的 Gulp 任务以及适当的名称
- 如何按特定顺序运行 Gulp 任务
- 如何在GULP任务中循环传递数组
- gulp/webpack任务的输出文件名
- 创建Gulp任务但不起作用,为什么
- 如何通过Gulp任务增加版本号
- 如果满足条件,停止Gulp任务
- Gulp任务似乎运行了两次,而不是一次
- 如何删除失败Gulp任务的调用堆栈
- 将字符串作为参数传递给 gulp 任务
- Gulp Browserify Reactify 任务非常慢
- 当运行 generator-gulp-webapp 的 'build' 任务(使用 gulp-jade)
- 为什么 Gulp 在运行依赖于它的任务之前没有完成我的“清理”任务
- 在使用 GULP 任务将所有 JS 连接到单个 JS 文件中时,在 AngularJS 中出错
- 当我键入 npm start 时如何启动 Gulp 手表任务