我是 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
文件夹已经存在),我只有 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
文件夹甚至不会出现。当 dist
文件夹不存在时,看起来这个任务运行良好(不算空 index.html
),然后就出错了。好吧,我需要先完成删除整个 dist
文件夹的任务,然后再构建一个版本。单独运行 gulp buildDist
可以正常工作(index.html
是正常的)。
这是我的第一篇文章,我已经尽力把它写对了。将不胜感激任何帮助。
最佳答案
当您在 gulp 中指定依赖项时,它们会并行运行,而不是按顺序运行。这意味着您的 jade
、style
和 script
任务与您的 同时运行htmlDist
、styleDist
和 scriptDist
任务。
你应该使用 run-sequence包以确保您的任务按顺序运行。
var runSequence = require('run-sequence');
gulp.task('build', function(callback) {
runSequence('cleanDist', 'build', 'buildDist', callback);
});
关于javascript - Gulp 任务发布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26877527/