gulp压缩使用记录

• 首先全局安装gulp。

npm install --global gulp 

• 然后在项目根目录下安转环境包

npm install gulp --save-dev

• gulp需要组件配合使用：

压缩js，css等需要组件

这里提供一条命令直接运行即可

npm install  gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

• 组件作用

1. gulp-minify-css:压缩css
2. gulp-jshint：检查js
3. gulp-uglify：压缩js
4. gulp-concat：合并文件
5. gulp-rename：重命名
6. gulp-clean：清空文件夹
7. gulp-notify：提示信息

• 根目录下新建一个gulpfile.js，在里面写上配置，如下：

//以下require需要的module  
var gulp = require('gulp'),  
    minifycss = require('gulp-minify-css'),  
    concat = require('gulp-concat'),  
    uglify = require('gulp-uglify'),  
    rename = require('gulp-rename'),  
    del = require('del'); 
    
    
//压缩JS  
gulp.task('minify', function() {  
    gulp.src('js/*.js')  
        .pipe(concat('main.js'))         //合并所有js到main.js  
        .pipe(rename({suffix: '.min'}))  //rename压缩后的文件名 让main.js变成main.min.js  
        .pipe(uglify())                  //执行压缩  
        .pipe(gulp.dest('./build/js'))  
});  


//压缩CSS  
gulp.task('minifycss',function(){
   return gulp.src('css/*.css')            //设置css
       .pipe(concat('order_query.css'))    //合并css文件到"order_query"
       .pipe(gulp.dest('./build/styles'))  //设置输出路径
       .pipe(rename({suffix:'.min'}))      //修改文件名
       .pipe(minifycss())                  //压缩文件
       .pipe(gulp.dest('./build/css'))     //输出文件目录
});


//执行压缩前，先删除文件夹里的内容  
//执行删除的时候不要把目录定在build的子目录中，windows删除目录的同时会报错  
gulp.task('clean', function(cb) {  
    del(['build/css', 'build/js'], cb)  
});  


//在任务数组中放上面要执行的任务  
gulp.task('default', ['clean', 'minify', 'minifycss']);  

• 最后命令行执行gulp。