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
https://www.cnblogs.com/lakeInHeart/p/7257443.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,
}
