• gulp是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動執(zhí)行常見任務(wù)
• 使用 gulp 實(shí)現(xiàn)圖片壓縮、CSS 壓縮合并、JS 壓縮合并:

1. 安裝壓縮插件
安裝圖像壓縮插件
npm install gulp-imagemin --save-dev
安裝文件合并插件
npm install gulp-concat --save-dev
安裝css壓縮插件
npm install gulp-cssnano --save-dev
安裝js規(guī)范檢查插件
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代碼規(guī)范性檢查

3. 定義任務(wù)
定義css合并壓縮任務(wù)
gulp.task('build:css', function() {
    gulp.src('./src/css/*.css')
        .pipe(concat('index-merge.css'))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/')); // 
})

定義js合并壓縮任務(wù)
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/'));
})

定義圖片壓縮任務(wù)
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. 執(zhí)行任務(wù)
在命令行中執(zhí)行命令:
gulp build