javascript - Gulp 必须节省两次才能工作
问题描述
我一直在用 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"));
});
解决方案
推荐阅读
- android - 如何找到用于手动测试的 android 应用程序的代码覆盖率?
- symfony4 - 如何创建可以根据实体当前状态拒绝的自定义更新操作?
- android - 如何使用 ffmpeg 减少长视频中的执行时间
- laravel - Laravel:如何为多个域创建路由
- r - 向网格中的每个构面添加一条线
- apache-kafka - 在 Kafka Streams 中至少使用一次交付时,流处理是原子的/事务的吗?
- javascript - Express Validator 错误:expressValidator 不是函数
- firebase - 如何通过 Ionic 4 上的 routerLink 转到详细信息页面?
- excel - 如何在excel中将文本与以下文本分开?
- javascript - 有人在玩时自动扮演角色?