使用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