文章目录
打包压缩js、css文件
先上代码,如下所示
// 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
// 获取 cleancss 模块(用于压缩 CSS)
var cleanCSS = require('gulp-clean-css');
//重命名
var rename = require('gulp-rename');
// 压缩 css 文件
// 在命令行使用 gulp csscompress 启动此任务
gulp.task('csscompress', function () {
// // 1. 找到文件
return gulp.src('./css/*.css')
.pipe(concat('main.css'))
// // 2. 压缩文件
.pipe(cleanCSS())
.pipe(rename("css.css"))
// // 3. 另存压缩后的文件
.pipe(gulp.dest('./dist/css'));
});
//压缩js
gulp.task('jscompress', function () {
return gulp.src('./js/*.js')
//1. 合并文件
.pipe(concat('main.js'))
// 2. 压缩文件
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
// 3. 另存压缩后的文件
.pipe(gulp.dest('./dist/js'));
});
//gulp4
gulp.task('hello', gulp.series('jscompress', 'csscompress'));
如何运行
- 安装gulp
命令如下:npm install gulp -g 全局安装gulp
- 安装css,js合并压缩插件
命令如下:npm install gulp-uglify gulp-concat gulp-clean-css
- 安装文件重命名插件
命令如下:npm install gulp-rename
- 执行
命令如下:gulp hello