用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