使用Gulp壓縮CSS/JS

一、安裝

1.安裝gulp

npm install -g gulp

2.檢查gulp 版本

gulp -v

3.在項目文件夾下安裝gulp

npm install --save-dev gulp

二、壓縮JS

1.安裝gulp-uglify模塊

npm install gulp-uglify

2.在項目根目錄創建gulpfile.js文件

3.在gulpfile.js文件中寫入代碼

 
 
 
         

  
  
  
          
// 獲取 gulp
  
  
  
          
var 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']);
 
 
 
         

三、壓縮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']);
  
  
  
          
});
 
 
 
         

四、重命名文件

1.安裝gulp-rename模塊

npm install gulp-rename

2.修改gulpfile.js內代碼

 
 
 
         

  
  
  
          
// 獲取 gulp
  
  
  
          
var 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