gulp4.0 gulpfile.js 压缩html js css images

var gulp = require('gulp');

var uglify = require('gulp-uglify');

var minifyCSS = require('gulp-minify-css');

// 压缩html插件

var minifyHTML = require('gulp-htmlmin');

var image = require('gulp-imagemin');

var clean = require('gulp-clean');//清理文件或文件夹

var changed = require('gulp-changed');

// 压缩css文件

// 在命令行使用 gulp css 启动此任务

gulp.task('css', () => {

// 1. 找到文件

return gulp.src('./src/**/*.css')

// 2. 压缩文件

.pipe(minifyCSS())

// 3. 另存为压缩文件

.pipe(gulp.dest('./dist'))

});

// 压缩js文件

// 在命令行使用 gulp script 启动此任务

gulp.task('script', () => {

return gulp.src('./src/**/*.js')

.pipe(uglify())

.pipe(gulp.dest('./dist'))

});

// 压缩html文件

// 在命令行使用 gulp htmlpage 启动此任务

gulp.task('htmlpage', () => {

var options = {

removeComments: true, //清除HTML注释

collapseWhitespace: true,//压缩HTML

minifyJS: true,

minifyCSS: true,

removeEmptyAttributes: true, //删除所有空格作属性值

};

return gulp.src('./src/**/*.html')

.pipe(minifyHTML(options))

.pipe(gulp.dest('./dist'));

});

// 压缩图片文件

// 在命令行输入 gulp image 启动此任务

gulp.task('images', () => {

return gulp.src('./src/**/*.+(png|jpg|jpeg|gif|svg)')

// 压缩

.pipe(image())

// 保存

.pipe(gulp.dest('./dist'));

});

//删除之前生成的文件

gulp.task('clean', function () {

gulp.src('./dist', { read: false })

.pipe(clean());

})

// gulp4.0以后 不在支持 gulp.watch('./src/**/*.js', ['script']);

gulp.task('watchs', function () {

gulp.watch('./src/**/*.html', gulp.series('htmlpage'));

gulp.watch('./src/**/*.js', gulp.series('script'));

gulp.watch('./src/**/*.css', gulp.series('css'));

});

// clean可用

// gulp.task('default', gulp.parallel('watchs', 'script', 'htmlpage', 'css', 'images'));

// gulp.task('default', gulp.series('clean', gulp.parallel('watchs', 'script', 'htmlpage', 'css', 'images')));

gulp.task('default', gulp.series(gulp.parallel('watchs', 'script', 'htmlpage', 'css', 'images')));

运行命令

先安装 npm install --save-dev gulp

运行命令 gulp