gulp 工作流:

一、基础设施

1.安装nodejs/npm
下载基于windows 64位操作系统的最新node msi安装包。下载地址
选择正确目录安装node,注意不要安装至C盘,路径不要有空格.
安装完成后在任意一个idea中最下面的‘terminal’控制台中输入node -v 查看node版本号,没报错说明安装node成功
v0.63之后node集成npm,输入:npm -v 正常输出说明npm已经安装成功
没有输出的话,百度搜索关键字:windows安装npm
2.配置cnpm:
控制台输入:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后便可以通过下面命令安装指定的npm包:

$ cnpm install [packagename]

参考:npm安装
我们的工作流基础设施已经搭建好了,
下面开始从项目开始介绍如何使用:
注:下面所有命令在terminal控制台中输入

二、接入gulp

1.在项目根目录,(与src同级)下新建文件gulpfile.js
2.安装gulp包

$ cnpm install --save-dev gulp //作为项目依赖安装gulp

这就可以了,gulp已经接入了

三、js代码check

目的,通过脚本检查代码中忽略、隐藏的书写问题。
1.输入命令:

$ cnpm install gulp-jshint --save-dev //安装jshint

2.在根目录创建.jshintrc文件,存储jshint配置项
3.补充配置项到.jshintrc文件:

{
"node": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true
}
//"strict": true, //严格模式 参考文章(http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html)
//"asi": true, //允许省略分号(写上这条,规避检查出很多警告 可以去掉)
//"bitwise": true, //禁止使用位运算符,比如经常把&&写错& 规避此错误
//"noarg": true, //禁止使用.caller 和 .callee (ECMS5已经禁用了此 可以去掉)
//"eqeqeq": true, //禁止使用== 和 != 强制使用=== 和 !==
//"undef": true, //禁止使用不在全局变量列表中的未定义变量,所有的局部变量必须先声明之后才能使用
//"curly": true, //循环或者条件语句必须使用花括号包住
//"devel": true, //允许使用调试代码:console,alert
//"jquery": true, //定义全局暴露的jQuery库 (可以去掉)
//"browser": true, //暴露浏览器属性的全局变量 如window document
//"quotemark":true (商榷)
//"globals": {"$":true,"require":true,"FastClick":true,"Swiper"},
//debug 如果是true,则允许使用debugger的语句
//evil 如果是true,则允许使用eval方法
//forin 如果是true,则不允许for in在没有hasOwnProperty时使用
//maxerr 默认是50。 表示多少错误时,jsLint停止分析代码
//newcap 如果是true,则构造函数必须大写
//nomen 如果是true,则不允许在名称首部和尾部加下划线
//onevar 如果是true,则在一个函数中只能出现一次var
//passfail 如果是true,则在遇到第一个错误的时候就终止
//plusplus 如果是true,则不允许使用++或者- -的操作
//regexp 如果是true,则正则中不允许使用.或者[^…]
//sub 如果是true,则允许使用各种写法获取属性(一般使用.来获取一个对象的属性值)
//white 如果是true,则需要严格使用空格用法。
//参考:配置项

4.补充gulpfile:

var gulp = require("gulp");
var jshint = require('gulp-jshint');

gulp.task('jshint', function () {
    return gulp.src('./src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

5.输入命令:gulp jshint
6.根据控制台输出排错,例:

src\index.js: line 19, col 34, Strings must use singlequote.
src\index.js: line 19, col 57, Strings must use singlequote.
src\index.js: line 21, col 38, Strings must use singlequote.

注:可根据代码严谨程度修改配置项,保证review代码之前,自己先验证通过
建议配置项:

{
"strict": false,
"bitwise":true,
"noarg":true,
"undef":true,
"curly":true,
"devel":false,
"evil":false,
"forin":true,
"newcap":true,
"nomen":true,
"browser":true,
"sub":true
}

四、css代码check

目的,通过脚本检查css的写法,兼容性,内核补充
1.增加依赖:

 autoprefixer = require('gulp-autoprefixer'); // 添加 CSS 浏览器前缀

2.安装gulp-autoprefixer插件:

 $ cnpm install gulp-autoprefixer --save-dev

3.创建任务:

gulp.task('cssfixer', function () {
    return gulp.src('./src/*.css')
        .pipe(autoprefixer('last 2 versions'))
        .pipe(gulp.dest("dist/css"))
});

4.输入命令:

$ gulp cssfixer

5.dist/css下产出的问件即加了浏览器兼容的代码

今天简单只讲前端工作流的搭建,想了解其他关于gulp相关的问题
请移步:gulp基础教程