初識gulp

    之前一段時間學習使用了gulp自動化構建工具，併在現在使用的項目上部署使用，同時在這做個筆記進行小結，以便加深記憶，如有理解錯誤的地方請不吝賜教

　　　　gulp 的解釋我就不多說了 這裡引用官網的一句話    Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務，提高開發效率

　　　　在這我多使用gulp進行JS壓縮，css壓縮，同時其還能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重覆指定的這些步驟，下麵我就不多說了直接上手如何使用gulp

　　　　1.首先當然是要安裝一個node,gulp是具於node的所以這是最基礎的一步

　　　　你可以去node官網下載一個版本node安裝，鏈接http://nodejs.cn/（這裡我使用的node均在window系統下）；

　　　　2.使用命令行進行gulp安裝下載，

　　　　1）.這裡就稍微記錄下node下常用的一點命令行

　　　　　　　　node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。

　　　　　　　　npm -v查看npm的版本號，npm nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）。

　　　　　　　　cd定位到目錄，用法：cd + 路徑 ；

　　　　　　　　dir列出文件列表；

　　　　　　　　cls清空命令提示符視窗內容。

　　　　　　2）安裝gulp

　　　　　　　　2.1.首先全局安裝gulp，目的通過其執行gulp任務，安裝命令為：（npm install gulp -g）,查看是否安裝成功（gulp -v）出現版本號即為成功;

　　　　　　　　2.2.新建一個package.json文件，當然你也可以使用（npm init）來創建一個package.json文件。

　　　　　　　　　　下麵以手動創建為例

{
  "name": "test",   //項目名稱（必須）
  "version": "1.0.0",   //項目版本（必須）
  "description": "This is for study gulp project !",   //項目描述（必須）
  "homepage": "",   //項目主頁
  "repository": {    //項目資源庫
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //項目作者信息
    "name": "xxx",
    "email": "[email protected]"
  },
  "license": "ISC",    //項目許可協議
  "devDependencies": {    //項目依賴的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

　　　　　　　　2.3.在使用的目錄下安裝gulp(npm install --save-dev gulp)，

　　　　　　　　2.4.在項目的根目錄新建一個gulpfile.js文件

1 var gulp = require('gulp');
3 gulp.task('gulps', () => {
4     return //需要執行的代碼
5 });
8 
9 然後在cmd中使用 gulp gulps  執行

　　　　　　3.一些api解釋

 1 var gulp = require('gulp');
 2 var cleanCSS = require('gulp-clean-css');
 3 var minJs = require('gulp-uglify');
 4 var rev = require('gulp-rev') ;
 5 var rename = require('gulp-rename');//重名名
 6 
 7 示例壓縮css,
 8     /*task 定義一個gulp任務，含三個個參數，
 9            第一個參數為任務名，必填；
10            第二個參數為依賴的任務，選填，
11            第三個為回調函數裡面執行的是必要的插件操作，必填
12      src 為指定文件路徑，可使用正則匹配
13      dest 指定輸出位置，
15     */
16 gulp.task('total-css', () => {
17     return gulp.src('Public/static/css/home/newKdBeiFen/*.css')
18         .pipe(rename({suffix:'.min'}))
19         .pipe(cleanCSS({ compatibility: 'ie8' }))
20         .pipe(gulp.dest('Public/static/css/home/monicss/'));
21 });        
22 /*watch用於監聽文件發生變化，文件發生改變就會執行該處指定的任務*/
23 gulp.task('watch',function(){
24     gulp.watch('Public/static/css/home/newKdBeiFen/*.css',['total-css']);
25 })

　　3.下麵記錄的均為gulp 的常用插件安裝　　　以下使用均為（npm install 插件名 --save-dev）

　　　　　　gulp-load-plugins ：自動載入 package.json 中的 gulp 插件，避免一個個require插

　　　　　　gulp-rename： 重命名

　　　　　　gulp-uglify：文件壓縮

　　　　　　gulp-concat：文件合併

　　　　　　gulp-less：編譯 less

　　　　　　gulp-clean-css：壓縮 CSS 文件

　　　　　　gulp-htmlmin：壓縮 HTML 文件

　　　　　　gulp-babel: 使用 babel 編譯 JS 文件

　　　　　　gulp-jshint：jshint 檢查

　　　　　　gulp-rev：添加時間戳

　　　　　　gulp-rev-collector：替換html中的link,srcipt

　　　　　　gulp-run-sequence：同步執行

　　　　　　gulp-imagemin：壓縮jpg、png、gif等圖片

　　　　　　gulp-livereload：當代碼變化時，它可以幫我們自動刷新頁面，除在模塊中需要安裝外，還需要在瀏覽器中安裝。

　　使用示參考

下麵方法來自百度的參考感謝大佬的分享，
像我這項目一般緩存都為幾年所以我們需要加入？xxx清除緩存，以css文件為例
/引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');//CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){
    return gulp.src('Public/static/css/home/newKdBeiFen/*.css')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('Public/static/css/home/monicss/'));
});//Html替換css文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', 'View/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('View'));
});

//按順序執行
gulp.task('dev', function (done) {
    condition = false;
    runSequence(
        ['revCss'],
        ['revHtml'],
        done);
});

gulp.task('default', ['dev']);  //在cmd  執行gulp  default

此時我們生成的並不是我們所需的樣子，需要再去源文件處修改一些代碼

打開node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;


打開nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename +'-'+ hash + ext;
更新為: return filename + ext;


打開node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {


打開node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新為: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),


生成  <linkrel="stylesheet"href="../css/default.css?v=5a636d79c4">