使用Gulp压缩CSS/JS

1、安装

1.安装gulp

npm install -g gulp

2.检查gulp 版本

gulp -v

3.在项目文件夹下安装gulp

npm install --save-dev gulp

2、压缩JS

1.安装gulp-uglify模块

npm install gulp-uglify

2.在项目根目录建立gulpfile.js文件

3.在gulpfile.js文件中写入代码

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
// 获取 gulpvar gulp = require('gulp');// 获取 uglify 模块（用于压缩 JS）var uglify = require('gulp-uglify');// 压缩 js 文件// 在命令行使用 gulp script 启动此任务gulp.task('jscompress', function() { // 1. 找到文件 return gulp.src('js/1.js') // 2. 压缩文件 .pipe(uglify()) // 3. 另存压缩后的文件 .pipe(gulp.dest('dist/js'));});

4.命令行中切换到gulpfile.js所在的目录，执行以下命令开始压缩

gulp script

5.在gulpfile.js中添加自动监视任务

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
// 在命令行使用 gulp auto 启动此任务gulp.task('auto', function () { // 监听文件修改，当文件被修改则执行 script 任务 gulp.watch('js/1.js', ['jscompress']);});

6.在gulpfile.js中设置默认任务（即命令行中输入gulp执行的任务）

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
// 使用 gulp.task('default') 定义默认任务// 在命令行使用 gulp 启动 script 任务和 auto 任务gulp.task('default', ['auto']);

3、压缩CSS

1.安装gulp-clean-css模块

npm install gulp-clean-css

2.在gulpfile.js文件中添加相应任务

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
// 获取 cleancss 模块（用于压缩 CSS）var cleanCSS = require('gulp-clean-css');// 压缩 css 文件// 在命令行使用 gulp csscompress 启动此任务gulp.task('csscompress', function() { // 1. 找到文件 return gulp.src('css/my.css') // 2. 压缩文件 .pipe(cleanCSS()) // 3. 另存压缩后的文件 .pipe(gulp.dest('dist/css'));});

3.修改添加对应的自动监视任务

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
// 在命令行使用 gulp auto 启动此任务gulp.task('auto', function () { // 监听文件修改，当文件被修改则执行 script 任务 gulp.watch('js/1.js', ['jscompress']); gulp.watch('css/my.css', ['csscompress']);});

4、重命名文件

1.安装gulp-rename模块

npm install gulp-rename

2.修改gulpfile.js内代码

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
// 获取 gulpvar gulp = require('gulp');// 获取 uglify 模块（用于压缩 JS）var uglify = require('gulp-uglify');// 获取 cleancss 模块（用于压缩 CSS）var cleanCSS = require('gulp-clean-css');var rename = require("gulp-rename");// 压缩 js 文件// 在命令行使用 gulp jscompress 启动此任务gulp.task('jscompress', function() { // 1. 找到文件 return gulp.src('js/1.js') .pipe(rename({suffix: '.min'})) // 2. 压缩文件 .pipe(uglify()) // 3. 另存压缩后的文件 .pipe(gulp.dest('dist/js'));});// 压缩 css 文件// 在命令行使用 gulp csscompress 启动此任务gulp.task('csscompress', function() { // 1. 找到文件 return gulp.src('css/my.css') .pipe(rename({suffix: '.min'})) // 2. 压缩文件 .pipe(cleanCSS()) // 3. 另存压缩后的文件 .pipe(gulp.dest('dist/css'));});// 在命令行使用 gulp auto 启动此任务gulp.task('auto', function () { // 监听文件修改，当文件被修改则执行 script 任务 gulp.watch('js/1.js', ['jscompress']); gulp.watch('css/my.css', ['csscompress']);});// 使用 gulp.task('default') 定义默认任务// 在命令行使用 gulp 启动 script 任务和 auto 任务gulp.task('default', ['auto']);

参考资料：
https://github.com/nimojs/gulp-book
http://www.cnblogs.com/Tzhibin/p/4318457.html