使用Glup.JS優化JS、CSS、圖片，壓縮合並

下面進入正題，簡單說一下如何安裝，使用gulp

1. 安裝Gulp

gulp的任務處理機制是，未來源檔案看成輸入，經過Node.js的Stream操做流，並將流導向gulp的任務處理插件plugins，處理完成後將結果輸出到指定輸出目錄。

從gulp的任務處理機制能夠看出，gulp至關於一個任務管理器，而實際的業務處理是由其插件完成的。所以，gulp的安裝也包括：安裝gulp和安裝gulp任務插件兩部分。

1.1 安裝Gulp

安裝gulp，你能夠選擇全局安裝或安裝在項目的dev開發環境下。

全局安裝gulp：

 

npm install gulp -g

 

在項目的dev開發環境中安裝：

 

 

npm install gulp --save-dev

1.2 安裝Gulp插件在開發環境安裝後，會在項目package.json文件的devDependencies節點下保存。建議對gulp使用全局安裝，這樣能夠在全部項目中使用。全局安裝對於非Node.js項目尤其適用。

gulp插件的安裝，也可使用全局安裝或安裝在dev開發環境，本站比較推薦使用全局安裝。gulp插件能夠按需安裝，若是你只須要處理CSS，那麼只安裝CSS相關處理插件便可。gulp的全部插件請參考：Gulp插件。對於CSS文件處理、JS文件處理、圖片處理，你可能須要如下插件：

gulp-ruby-sass：基於ruby和sass的Sass文件編譯，可將Sass文件爲CSS文件

gulp-autoprefixer：Autoprefixer，能夠解析CSS文件，而且添加瀏覽器前綴到CSS規則裏

gulp-minify-css：CSS文件壓縮工具

gulp-jshint：JSHint，一個JS代碼檢查工具，能夠檢測JavaScript中錯誤和潛在問題

gulp-uglify：uglify，JS代碼優化工具，可用於壓縮和美化（或者叫「醜化」）javascript代碼

gulp-concat：文件拼接工具，可用於多個CSS文件或多個JS文件的合併

gulp-imagemin：imagemin，圖片壓縮工具

通常來講上面介紹的插件能夠知足通常前端資源的處理，好比：less和sass文件的編譯、CSS文件的合併壓縮、JS文件的合併壓縮、圖片的壓縮。在平常工做中，你可能還須要一些處理，像執行gulp任務前清理目錄、服務端資源的監控、只針對變動資源的處理等，下面的一些插件可能會用到：

gulp-clean：目標目錄清理，在用於gulp任務執行前清空目標目錄

gulp-cache：資源緩存處理，可用於緩存已壓縮過的資源，如：圖片

gulp-notify：任務通知工具，可用於某項任務執行完成的在控制檯輸出通知

gulp-livereload：服務器資源監控，當服務端資源變化時對頁面進行刷新。須要要配合瀏覽器插件使用或在頁面這樣處理，使用比較複雜，非必要時不推薦使用

在dev開發環境下安裝這些插件：

 

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

2.1 gulp一些經常使用的API2. 使用Gulp

要深刻了解gulp，建議查看其官方文檔。對於通常使用gulp，瞭解下面幾個API，便可知足平常需求：

gulp.task()：方法用來定義任務，內部使用的是Orchestrator

gulp.src()：gulp是基於Node.js的流進行任務轉接及處理的，gulp.src()用於引入流，即：讀取要操做的文件。能夠是下面幾種：

/public/js/index.js：指定的一個文件

/public/js/*.js：某個目錄下的全部文件

/public/**/*.js：目錄下及其全部子目錄下的全部js文件

!/public/js/main.js：某個目錄下，除main.js之外的全部js文件

*.+(js|css);正則表達式匹配根目錄下擴展名是js和css的全部文件

gulp.dest()：在指定路徑輸出文件。只能對其指定路徑，而不能對輸出文件重命名，重命名可使用插件gulp-rename

gulp.watch()：監視文件的變化（如：CSS、JS、圖片），當文件發生變化後，咱們能夠利用它來執行相應的任務

2.2 gulp使用示例

以expressWeb框架爲例

在全局安裝gulp及相關插件後，建立gulpfile.js文件（在本例中，文件在項目根目錄下）。gulpfile.js文件內容以下

 

在項目根目錄下，執行命令：執行gulp命令前，public目錄結構是下面這樣的：

var gulp = require('gulp'),  
  //  sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
 
// 樣式處理任務
gulp.task('styles', function() {  
  return gulp.src('public/stylesheets/*.css')    //引入全部CSS
    .pipe(concat('main.css'))           //合併CSS文件
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('public/dist/css'))      //完整版輸出
    .pipe(rename({ suffix: '.min' }))   //重命名
    .pipe(minifycss())                  //CSS壓縮
    .pipe(gulp.dest('public/dist/css'))      //壓縮版輸出
    .pipe(notify({ message: '樣式文件處理完成' }));
});
 
// 若是須要經過scss文件編譯css，就使用這段代碼
// gulp.task('styles', function() {  
//   return gulp.src('public/html/css/main.scss')
//     .pipe(sass({ style: 'expanded', }))
//     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(rename({ suffix: '.min' }))
//     .pipe(minifycss())
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(notify({ message: 'Styles task complete' }));
// });
 
// JS處理任務
gulp.task('scripts', function() {  
  return gulp.src('public/javascripts/*.js')      //引入全部需處理的JS
    .pipe(jshint.reporter('default'))         //S代碼檢查
    .pipe(concat('main.js'))                  //合併輸出的JS文件名稱
    .pipe(gulp.dest('public/dist/js'))        //完整版輸出路徑
    .pipe(rename({ suffix: '.min' }))         //重命名
    .pipe(uglify())                           //壓縮JS
    .pipe(gulp.dest('public/dist/js'))        //壓縮版輸出路徑
    .pipe(notify({ message: 'JS文件處理完成' }));
});
 
// 圖片處理任務
gulp.task('images', function() {  
  return gulp.src('public/images/*')        //引入全部需處理的JS
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))      //壓縮圖片
    // 若是想對變更過的文件進行壓縮，則使用下面一句代碼
    // .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 
    .pipe(gulp.dest('public/dist/img'))
    .pipe(notify({ message: '圖片處理完成' }));
});
 
// 目標目錄清理
gulp.task('clean', function() {  
  return gulp.src(['public/dist/css', 'public/js', 'public/img'], {read: false})
    .pipe(clean());
});
 
// 預設任務，執行清理後，
gulp.task('default', ['clean'], function() {  
    gulp.start('styles', 'scripts', 'images');
});
 
// 文檔臨聽
gulp.task('watch', function() {
 
//  // 監聽全部.scss文檔
//   gulp.watch('src/styles/**/*.scss', ['styles']);
 
    // 監聽全部css文檔
    gulp.watch('public/html/css/*.css', ['styles']);
 
    // 監聽全部.js檔
    gulp.watch('public/html/js/*.js', ['scripts']);
 
    // 監聽全部圖片檔
    gulp.watch('public/html/img/*', ['images']);
 
//   // 建立實時調整服務器 -- 在項目中未使用註釋掉
//   var server = livereload();
//   // 監聽 dist/ 目錄下全部文檔，有更新時強制瀏覽器刷新（須要瀏覽器插件配合或按前文介紹在頁面增長JS監聽代碼）
//   gulp.watch(['public/dist/**']).on('change', function(file) {
//     server.changed(file.path);
//   });
 
});

 

gulp

執行gulp命令後，public目錄結構是下面這樣的：

gulp操做成功，文件被輸出到了publi/dist目錄下，CSS和JS文件都有完整版和壓縮版兩個，

圖片也通過了壓縮處理。若是須要進行其它處理，可自行修改gulpfile.js文件代碼。