Gulp压缩CSS和JS

1.安装node, npm install node

2.安装gulp, npm install gulp

3.安装所需模块，一般只压缩的话需要 npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del

4.在项目的根目录新建src文件夹, 将要压缩的css和js文件放在里面

5.在项目的根目录新建gulpfile.js, 代码如下:

var gulp = require('gulp'), //基础库
    //css压缩                     
    minifycss = require('gulp-minify-css'),
    //文件重命名     
    concat = require('gulp-concat'), 
    //js压缩           
    uglify = require('gulp-uglify'), 
    //文件重命名           
    rename = require('gulp-rename'), 
    //清空文件夹方法1           
    clean = require('gulp-clean'),
    //清空文件夹方法2              
    del = require('del');                       


    //压缩css，在cmd中输入gulp minifycss后，执行的就是这个命令
    gulp.task('minifycss', function() {
        return gulp.src('src/style.css') //压缩的文件
            //合并所有js到main.css
            .pipe(concat('main.css'))   
            //输出main.css到文件夹 
            .pipe(gulp.dest('minified/css')) 
            //rename压缩后的文件名   
            .pipe(rename({suffix: '.min'}))  
            //执行压缩 
            .pipe(minifycss())  
            //输出文件夹 
            .pipe(gulp.dest('minified/css')); 
    });


    //压缩js，在cmd中输入gulp minifyjs后，执行的就是这个命令
    gulp.task('minifyjs', function() {
        return gulp.src('src/common.js') //压缩的js文件
            //合并所有js到main.js
            .pipe(concat('main.js'))   
            //输出main.js到文件夹 
            .pipe(gulp.dest('minified/js'))    
            //rename压缩后的文件名
            .pipe(rename({suffix: '.min'}))  
            //压缩 
            .pipe(uglify())  
            //输出  
            .pipe(gulp.dest('minified/js'));  
    });


    //执行压缩前，先删除文件夹里的内容
    gulp.task('clean', function() {
        del(['minified/css', 'minified/js']);
    });

    /*gulp.task('clean',function(){　　　　　　　　　　　　  
        return gulp.src('minified',{ read : false}) //src的第二个参数的{read:false}，是不读取文件,加快程序。
            .pipe(clean());
    })*/


    //默认命令，在cmd中输入gulp后，执行的就是这个命令
    gulp.task('default', ['clean', 'minifycss', 'minifyjs']);

 

6.在cmd中执行gulp