[英]Gulp.js minifies, uglifies and copies all the files but still the app in the dist folder doesn't work
我正在做一个项目,这是我第一次尝试用gulp来组织Web应用程序。
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const cssminify = require('gulp-cssmin');
// Copies html to dist folder
gulp.task('copyHtml', function(){
return gulp.src('./*.html')
.pipe(gulp.dest('dist'));
});
gulp.task('imgOpt', function(){
return gulp.src('./images/{**\/*.*,*.*}')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
gulp.task('minify', function(){
return gulp.src('./js/*.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('dist/js'));
});
gulp.task('copyAssets', function(){
return gulp.src('./assets/**/*.*')
.pipe(gulp.dest('dist/assets'));
});
gulp.task('copyJSON', function(){
return gulp.src(['!package.json', '*.json'])
.pipe(gulp.dest('dist'));
});
gulp.task('minifycss', function(){
return gulp.src('./css/*.css')
.pipe(cssminify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('copyFonts', function(){
return gulp.src('./fonts/**/*.*')
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('default',['copyHtml', 'imgOpt', 'minifycss', 'minify', 'copyAssets', 'copyJSON', 'copyFonts']);
gulp.task('watch', function(){
gulp.watch('./*.html',['copyHtml']);
gulp.watch(['!package.json', '*.json'],['copyJSON']);
gulp.watch('./fonts/**/*.*',['copyFonts']);
gulp.watch('./assets/**/*.*',['copyAssets']);
gulp.watch('./images/{**\/*.*,*.*}',['imgOpt']);
gulp.watch('./css/*.css',['minifycss']);
gulp.watch('./js/*.js',['minify']);
});
上面是我的gulpfile.js。 当我在git中使用gulp命令处理此文件时,该文件可以正常工作且没有任何错误,并且创建了“ dist”文件夹,但传输到dist文件夹的项目全部搞砸了,看起来好像缺少了很多代码。 我无法检测到问题。
我的所有JavaScript代码都在ES5中,因为ES6标准不可接受,并且在此过程中遇到错误。
问题解决了。 不好的是,我使用的是旧插件来缩小被贬低的CSS。 现在一切正常。
只需清除一下:gulp-minify-css和gulp-cssmin是gulp的较旧插件,目前尚未使用。 取而代之的是,使用gulp-clean-css来缩小CSS。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.