gulp+ThinkPHP配置

gulp+ThinkPHP配置

gulp+ThinkPHP配置

目錄結構：

html
  |-src 開發目錄
     |-Home  靜態頁面
     |-Public 靜態資源目錄
  |-dist  生產目錄
     |-Home  靜態頁面
     |-Public 靜態資源目錄

---

注：gulp-cssnano 棄用

命令行運行指令

cnpm install --save-dev

gulp watch  //熱刷新

gulp build  //壓縮輸出內容

gulp clean  //清空目錄下的dist文件

更新

2/10/2018 4:33:56 PM

添加配置

安裝包

- gulp
- browser-sync      保存自動刷新
- del               文件刪除
- gulp-rename       重命名文件
- gulp-cached       存當前任務中的文件，只讓已修改的文件經過管道
- gulp-uglify       壓縮文件
- modify-filename   修改路徑中的文件名
- gulp-rename       重命名
- gulp-jshint       js語法檢查
- jshint                js語法檢查
- gulp-contrib-copy 不編譯的文件直接copy
- gulp-notify       至關於 console.log()輸出信息
- gulp-filter       過濾篩選指定文件
- gulp-less             less編譯
- gulp-sourcemap    css資源地圖
- gulp-babel            處理es6
- babel-core            處理es6
- babel-preset-env  處理es6
- gulp-rev          插入文件指紋（控制版本號）
- gulp.spritesmith  生成雪碧圖
- gulp-cssnano  CSS 壓縮
- run-sequence  添加版本號
- gulp-rev-collector        替換html模板中的連接
- rev-path      添加版本號
- gulp-rev      添加指紋（版本號）
- run-sequence  添加版本號
- gulp-jsduck   生成js接口文檔
- cloneable-readable        安全地克隆可讀流

指令

gulp less       編譯less
gulp css        處理css
gulp clean      清除生產環境目錄
gulp image      圖片輸出
gulp script     處理js
gulp es6        處理es6（單獨位於/js/es6目錄下）
gulp spritesmith    生成雪碧圖
gulp spritesmith    生成雪碧圖
gulp build          執行所有編譯任務
gulp doc            生成js接口文檔

jsdoc

生成javascript API文檔

http://yuri4ever.github.io/jsdoc/#@default

https://github.com/rwhogg/gulp-jsduck

安裝對應的ruby方法（使用jsdoc）

https://rubyinstaller.org/downloads/
http://blog.csdn.net/u012882134/article/details/51685127

使用

http://www.cnblogs.com/hxling/archive/2012/11/27/2791067.html

命 令 名 描　　述

    @param  @argument 指定參數名和說明來描述一個函數參數
    @returns         描述函數的返回值
    @author          指示代碼的做者
    @deprecated    指示一個函數已經廢棄，並且在未來的代碼版本中將完全刪除。要避免使用這段代碼
    @see               建立一個HTML連接，指向指定類的描述
    @version         指定發佈版本
    @requires        建立一個HTML連接，指向這個類所需的指定類
    @throws @exception   描述函數可能拋出的異常的類型
    {@link}           建立一個HTML連接，指向指定的類。這與@see很相似，但{@link}能嵌在註釋文本中
    @fileoverview   這是一個特殊的標記。若是在文件的第一個文檔塊中使用這個標記，則指定該文檔塊的餘下部分將用來提供這個文件的概述
    @class            提供類的有關信息，用在構造函數的文檔中
    @constructor   明確一個函數是某個類的構造函數
    @type            指定函數的返回類型
    @extends       指示一個類派生了另外一個類。JSDoc一般本身就能夠檢測出這種信息，不過，在某些狀況下則必須使用這個標記
    @private         指示一個類或函數是私有的。私有類和函數不會出如今HTML文檔中，除非運行JSDoc時提供了--private命令行選項
    @final             指示一個值是常量值。要記住JavaScript沒法真正保證一個值是常量
    @ignore         JSDoc忽略有這個標記的函數

添加版本號

項目開發依賴

npm install --save-dev gulp-rev             版本8.1.1
    npm install --save-dev gulp-rev-collector   版本1.2.4
    npm install --save-dev run-sequence

須要修改對應的node包內容

參考網址
https://www.jianshu.com/p/df593ad8082d
http://www.javashuo.com/article/p-cwfmgkvz-dp.html

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

    //2.打開nodemodules\gulp-rev\nodemodules\rev-path\index.js
    //10行
    return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
    //更新爲:
    return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

    //3.打開node_modules\gulp-rev-collector\index.js
    //40行
    var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
    //更新爲:
    let cleanReplacement =  path.basename(json[key]).split('?')[0];
    //71行
    return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
    //更新爲
    var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
    rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
    return rp;

使用 jshintrc參數（js語法檢查）

添加到package.json文件中

參考自https://www.jianshu.com/p/f6da9eb81994

https://blog.csdn.net/p358278505/article/details/70257392?locationNum=12&fps=1

{
//增強選項：

//use es6. 3/5/6
"esversion": 6,

//循環必須用大括號包起來
"curly": true,

//設置爲true,禁止使用這個選項 ==和 !=，強制使用 ===和 !==。
"eqeqeq": false,

//容許警告js將來版本中定義的標識符。
"futurehostile": true,

//檢查無效 typeof操做符的值
"notypeof": true,

//檢查變量重複定義
// 他接受4個值："inner" 只檢查是否在相同的做用域重複定義;"outer" 檢查外部做用域;
// false 與inne同樣; true 容許變量覆蓋
"shadow": "inner",

//ECMAScript 5嚴格模式
// "global" - 全局層面的嚴格模式"use strict";
// "implied" - 文件裏面使用"use strict";
// false - 禁止使用嚴格模式
// true - 函數上面必須使用一個"use strict";
"strict": "implied",

//變量未定義
"undef": true,

//變量定義未使用
"unused": true,

// 設置爲true時，禁止使用var聲明變量
// "varstmt": true,

// "globals": {
//     "require": true
// },

//寬鬆選項：

// 禁止缺乏分號警告
"asi": true,

//環境選項：
//暴露瀏覽器屬性的全局變量，列如 window,document;
//注意:這個選項不暴露變量 alert或 console。
"browser": true,

//這個選項定義了全局變量,一般用於日誌調試: console, alert等等
"devel": true,

//這個選項定義全局變量能夠當你的代碼運行在node的運行時環境
"node": true,

//這個選項告訴JSHint,輸入代碼描述了一個ECMAScript 6模塊。全部模塊的代碼解釋爲嚴格模式代碼。
"module": true,

//這個選項定義全局暴露的jQuery庫。
"jquery": true

// 強制使用有效的 JSDoc 註釋
"valid-jsdoc":1,
// 強制 typeof 表達式與有效的字符串進行比較
// typeof foo === "undefimed" 錯誤
"valid-typeof":2,

}