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,

}