gulp前端自动化构建工具（三）：gulp工具配置文件

本篇前言

上一篇介绍本工具所用到的gulp插件，欢迎阅读。

本篇将对本工具的配置文件进行展示，配置代码中具有详细的注释，其中config-tool和config-apps需要配合gulpfile代码理解，下一篇文章将展示gulpfile的逻辑代码。

config-tool.js

本配置文件为gulp工具运行的必要配置，代码如下：

/**
 * 工具配置
 */
var path = require('path'),
	config = {
		root: 'E:/gitwww/demo/gulp/', //工具所在物理路径
		docsDir: 'docs', // JS自动输出文档后存放的目录，相对根目录
		reloadDelay: 300, //browserSync浏览器自动刷新延时
		buildInfo: "<!-- build time :" + new Date().toLocaleString()+" -->", //构建文件的标识，存放于html文档中

		/*
			静态页面
		*/
		html: '**/*.html', //HTML下html文件路径后部分

		/*
			data-X 图片data属性命名
		*/
		img:[
			'thumb', // 缩略图 data-thumb
			'original', // 懒加载图 data-original
			'pic', 
			'img',
			'images'
		],

		/*
			以style方式写入的背景图片的class名
		*/
		backgroundImg: '.background-images',

		/*
			资源目录设置
		*/
		res:{
			js: 'js/*.{js,coffee,jsx}', //HTML下JS文件夹及文件
			css: 'css/*.{css,less,sass,styl,htc}', //HTML下CSS文件夹及文件
			img: 'img/*.{jpg,jpeg,png,gif,ico}', //HTML下img文件夹及文件
			font: 'font/*.{eot,svg,ttf,woff}' //HTML下font路径及后缀
		},
		/*
			需编译的项
		 */
		compile: {
			coffee: { //与下方path中的文件后缀保持一致，例如这里必须为“*.coffee”
				path: 'coffee/**/*.coffee',//文件路径，文件后缀和上级节点名保持一致
				tool: 'coffee({bare: true})'//所使用编译器的配置，配置后需在gulpfile.js文件中引入该编译器，注意编译器名保持一致
			},
			jsx: { 
				path: 'jsx/**/*.jsx',
				tool: 'babel({presets:["react","es2015","stage-0"]})'
			},
			less: {
				path: 'less/**/*.less',
				tool: 'less()'
			},
			scss: {
				path: 'scss/**/*.scss',
				tool: 'sass().on("error", sass.logError)'
			},
			sass: {
				path: 'sass/**/*.sass',
				tool: 'sass().on("error", sass.logError)'
			},
			styl: {
				path: 'styl/**/*.styl',
				tool: 'stylus()'
			},
			jade: {
				path: 'tpl/**/*.jade',
				tool: 'jade({pretty: true})'
			}
		}
	};
module.exports = config;

config-apps.js

本配置文件为gulp下项目配置，因为本工具支持单独项目（也可理解为单个模块）构建，所以在config.appsItem中的配置项要符合config.src下的项目个数及名称。代码如下：

/**
 * 应用配置
 */
var path = require('path'),
	config = {
		/*
			项目名/apps应用名,在config.srcHtmlDir下应该存在对应的目录，同时，在config.srcStaticAppsDir下也应该存在对应的目录
		 */
		appsItem: [
			'amd-requireJs-demo',
			'cmd-seaJs-demo',
			'gulp-compile-demo',
			'javascript-optimization-tips-demo',
			'react-demo'
		], 
		/*
			开发版本设置
		 */
		srcDir: 'src', // 开发目录，
		srcHtmlDir: 'html', // 开发目录下的HTML根目录，下级为各个项目的html目录
		srcStaticDir: 'static', // 开发目录下的资源根目录，下级为各个项目的资源目录夹、assents资源目录夹、libs资源目录夹
		srcStaticAppsDir: 'apps', // apps的资源目录，下级为具体应用的资源目录。如："static/apps/app1..."
		srcDomain: 'http://localhost:8860', // 本地web服务，如nginx、apache、IIS等
		srcPort: '8861', // 开发目录的web代理服务，域为“localhost”，端口为本端口。即："http://localhost:8860" => "http://localhost:8861"
		/*
			生产版本设置
		 */
		distDir: 'dist', // 生产目录
		distHtmlDir: 'html', // 生产目录下的HTML根目录，下级为各个项目的html目录
		distStaticDir: 'static', // 生产目录下的资源根目录，下级为各个项目的资源目录夹、assents资源目录夹、libs资源目录夹
		distStaticAppsDir: 'apps', // apps的资源目录，下级为具体应用的资源目录。如："static/apps/app1..."
		distDomain: 'http://localhost:8870', // 生产目录的本地web服务，如nginx、apache、IIS等
		distStaticDomain: 'http://localhost:8871', // 生产目录的本地资源服务，这里设置是为了构建时将html文档中的资源路径直接替换成资源域服务http://localhost:8871
		distPort: '8872', // 生产目录的web代理服务，域为“localhost”，端口为本端口。即："http://localhost:8870" => "http://localhost:8872"
		/*
			开发时是否执行
		 */
		jshint:false, //检查JS
		jsdoc:true //JS输出文档
	};

var appsConfig = function() {};
appsConfig.prototype.conf = function() {
	return config;
};
/**
 * 获取应用数组，用于构建的目录对象
 * @param  {String} mod build命令中输入的app名
 * @return {Array}     输出模块中的app名或者所有app
 */
appsConfig.prototype.getApp = function(app){
    var realApp,
        appsItem = config.appsItem; //获取配置的appsItem
    if (app.indexOf('/') !== -1) { //如果命令中输入的app名有下级目录
        var arr = app.split('/'); 
        realApp = arr[0]; //切割获得app应用名
        if (appsItem.indexOf(realApp) === -1) realApp = 'all'; //如果获得的应用名不存在，则返回“all”即所有app应用名
    }
    return realApp === 'all' ? appsItem : [realApp]; //如果为“all”，返回配置的appsItem中所有的app应用名；否则按照具有上下级关系的命令输出；
};
/**
 * 判断生产版本是否已经设置资源域
 * @return {boolean}     
 */
appsConfig.prototype.hasDistStaticDomain = function(){
    var domain = config.distStaticDomain;
    return domain === '' || domain === undefined || domain === null ? false : true;
},
module.exports = new appsConfig();

jsdoc.json

本配置文件是gulp-jsdoc3必须的配置文件，在JS自动输出说明文档时所用，输出的文档位置在config-tool.js中的config.docsDir项配置。本配置文件没有做注释说明，感兴趣的搜索gulp-jsdoc3插件查看。代码如下：

{
  "tags": {
    "allowUnknownTags": true,
    "dictionaries": ["jsdoc","closure"]
  },
  "source": {
    "include": [],
    "exclude": [],
    "includePattern": ".+\\.js(doc)?$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "opts": {
    "template": "templates/default",
    "encoding": "utf8",
    "destination": "",
    "recurse": true
  },
  "plugins": [
    "plugins/markdown",
    "plugins/summarize"
  ],
  "templates": {
    "cleverLinks": false,
    "monospaceLinks": false,
    "default": {
      "outputSourceFiles": true
    },
    "systemName":"Franks_JS_DOC",
    "path": "ink-docstrap",
    "theme": "cerulean",
    "navType": "vertical",
    "linenums": true,
    "dateFormat": "MMMM Do YYYY, h:mm:ss a"
  }
}

sftp.js

本配置文件是gulp-sftp必须的配置文件，代码如下：

/**
 * sftp配置
 * @type {Object}
 */
var sftp = {
	host:'192.168.200.11' , //服务器host
	port:22, //端口号
	user:'ftp_001',	//ftp用户名
	pass:'123456',	//ftp密码
	srcRemotePath:'/development/gulp/src/',	//默认为根目录，远程上传目录，如果不存在，则按这个创建
	distRemotePath:'/development/gulp/dist/',//默认为根目录，远程上传目录，如果不存在，则按这个创建
	remotePlatform:'windows'//服务器类型，可选windows或unix
}
module.exports = sftp;
//参考：https://www.npmjs.com/package/gulp-sftp#optionspassphrase

.jshintrc

本配置文件是gulp-jshint必须的配置文件，代码如下：

{
    "maxerr": 50, //当单个文档错误、警告超过该数字时，jshint会停止继续输入日志
    "maxdepth": 4, // 方法块中运行的嵌套层级
    "maxparams": 3, // 函数中允许的形参个数
    "bitwise": true, //如果是true，则禁止使用位运算符
    "curly": true, //如果是true，则要求在if/while的模块时使用TAB结构
    "debug": true, //如果是true，则允许使用debugger的语句
    "eqeqeq": false, // 如果是true，则要求在所有的比较时使用===和!==
    "forin": false, //如果是true，则不允许for in在没有hasOwnProperty时使用
    "freeze": false, //如果是true,则不允许覆盖原型和本地属性，如Array/date等
    "funcscope": true, //如果是true,内部控制结构定义的变量允许在控制体之外
    "iterator": false, //如果是true,则不对"__iterator__"进行警告，"__iterator__"兼容有问题
    "latedef": true, // 如果是true，则要求变量或函数，在使用之前必须要定义
    "undef": true, // 如果是ture，则所有的局部变量必须先声明之后才能使用
    "sub": true, // 如果是true，则允许使用各种写法获取属性(推荐使用person.name代替person[‘name’])
    "shadow": "inner", // 在设置的条件外允许存在使用多次定义同个变量；
    "asi": true, //如果是true,则允许缺少分号
    "lastsemic": true, //如果是true,则允许单行控制块省略分号
    "boss": true, //如果是true,则允许在if、for、while语句中使用赋值
    "debug": true, //如果是true,则允许存在debugger语句
    "eqnull": true, //如果是true,则允许存在'==null'
    "evil": true, //如果是true，则允许使用eval方法
    "expr": true, //如果是true,则允许应该出现赋值或函数调用的地方使用表达式
    "loopfunc": true, //如果是true,则允许在循环体中定义函数,建议使用闭包传递i
    "supernew": true, //如果是true, 允许new function() {…}和new Object
    "validthis": true //如果是true,允许在非构造函数中使用this，推荐用Function.call
}