用gulp压缩js和css

1、全局安装gulp，命令：npm install –global gulp

2、作为项目的开发依赖（devDependencies）安装，命令：npm install –save-dev gulp

3、进入项目目录，在项目中安装gulp，命令：npm install gulp –save-dev

4、在项目中安装gulp插件，gulp-uglify（压缩js代码），命令：npm install gulp-uglify –save-dev

5、在项目中安装gulp插件，gulp-clean-css（压缩css代码，minify已经弃用了，安装时会有警告提示安装gulp-clean-css），命令：npm install gulp-clean-css –save-dev

6、都安装成功后可以检查下package.json中devDependencies里有没有包含刚才安装的3个包（gulp、gulp-uglify、gulp-clean-css）。然后在项目根目录下创建gulpfile.js文件，代码如下

var gulp = require('gulp'),
    cleancss = require('gulp-clean-css'),
    uglify = require('gulp-uglify');


// 压缩 js 文件
gulp.task('compressjs', function() {
    // 1. 找到文件
    gulp.src('app/js/**/*.js')
    // 2. 压缩文件
        .pipe(uglify({ mangle: false }))
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('app/dist/js'))
})
// 压缩 css 文件
gulp.task('compresscss', function() {
    return gulp.src('app/css/*.css')
        .pipe(cleancss({compatibility: 'ie8'}))
        .pipe(gulp.dest('app/dist/css'));
});
//监听两个文件夹下文件的变化，自动压缩
gulp.task('auto',function(){
    gulp.watch('app/js/**/*.js',['compressjs']);
    gulp.watch('app/css/*.css', ['compresscss'])
})
gulp.task('default', ['compressjs', 'compresscss','auto']);

7、在项目中执行gulp命令，命令：gulp