初識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": "xxx@qq.com"
  },
  "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-rev-append：使用查詢字符串文件哈希緩存文件的gulp插件

　　　　　　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">

　　　　<script src="../js/app.js?v=3a0d844594"> </script>

 

 　　2.還一種添加哈希值清除緩存的方式

 1 html部分 須要在尾部添加？rev=@@hash 在執行後就會將@@hash替換成哈希值
 2 <!doctype html>
 3 <html>
 4   <head>
 5     <link rel="stylesheet" type="text/css" href="style/style-one.css?rev=@@hash">
 6     <script src="script/script-one.js?rev=@@hash"></script>
 7     <script src="script/script-two.js"></script>
 8   </head>
 9   <body>
10     <div><p>hello, world!</p></div>
11     <script src="script/script-three.js?rev=@@hash"></script>
12   </body>
13 </html>
14 
15 
16 配置部分
17 var rev = require('gulp-rev-append');
18 
19 gulp.task('rev', function() {
20   gulp.src('./index.html')
21     .pipe(rev())
22     .pipe(gulp.dest('.'));
23 });