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,

}