- gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务
- 使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并:
1. 安装压缩插件
安装图像压缩插件
npm install gulp-imagemin --save-dev
安装文件合并插件
npm install gulp-concat --save-dev
安装css压缩插件
npm install gulp-cssnano --save-dev
安装js规范检查插件
npm install jshint gulp-jshint --save-dev
安装js压缩插件
npm install uglify --save-dev
2. 载入插件
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify'); // js压缩
var imagemin = require('gulp-imagemin'); // image压缩
var jshint = require('gulp-jshint'); // js代码规范性检查
3. 定义任务
定义css合并压缩任务
gulp.task('build:css', function() {
gulp.src('./src/css/*.css')
.pipe(concat('index-merge.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist/css/')); //
})
定义js合并压缩任务
gulp.task('build:js', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
})
定义图片压缩任务
gulp.task('build:image', function() {
gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'));
})
gulp.task('build', ['build:css', 'build:js', 'build:image']);
4. 执行任务
在命令行中执行命令:
gulp build
