标签：nts 思想 输出 root mis cnp 重命名 回调 变化
1.安装node和npm
访问国外服务器网速不好时，安装依赖模块时会缺少文件。可以安装国内的镜像，之后使用cnpm命令代替npm命令。
npm install cnpm -g --registry=https://registry.npm.taobao.org
2.全局安装gulp
$npm install -g gulp
查看gulp的版本：$gulp –v
结果：cli version -3.0.2为全局安装，local version-3.0.2 为本地安装。
3.在项目根目录新建package.json文件
$npm ini
按提示输入相关配置信息即可
4.本地安装gulp
$npm install gulp --save-dev
$npm install [<@scope>/]<name>@<version>
卸载插件：npm uninstall <name> [-g] [--save-dev];(直接删除文件会报错)
5. 安装gulp的相关插件
$npm install module-name -save 自动把模块和版本号添加到package.json的dependencies部分
$npm install gulp-less -save-dve自动把模块和版本号添加到package.json的devdependencies部分
6. 编写gulpfile.js文件定义执行的任务
在项目根目录下创建gulpfile.js文件，里面定义需要执行的任务。同时新建一个发布目录，和开发目录分开，专门存放处理好的静态资源，将来发布时直接将发布目录下的所有文件拷到服务器即可。
7.运行gulf任务
CLI执行方式，默认执行gulpfile.js中的任务：$gulp defaultTask
如果任务不在项目根目录的gulpfile.js中定义，需要手动指定gulpfile的路径，如下所示：
$gulp minifyCssTask --gulpfile ./child/task.js
webstorm开发工具中：右键点击gulpfile.js，选择”Show Gulp Tasks”
常用命令：
$npm install gulp –g
安装到全局环境里面，包安装在Node安装目录下的node_modules文件夹中，一般在 \Users\用户名\AppData\Roaming\ npm\目录下，可以使用npm root -g查看全局安装目录。用户可以在命令行中直接运行该模块包支持的命令。
$npm install gulp --save-dev
包安装在指定项目的node_modules文件夹下，把安装包的信息写入package.json文件的devDependencies字段中。
1. gulp.src(globs[, options])
src方法是按照指定的路径将源文件转为Vinyl fs并输出至别的插件。gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，类似jQuery的链式操作。当前Node项目的根路径用’./’表示，或者直接从和gulpfile.js平级的目录开始，’/’表示的是盘符根目录。
globs：匹配符合特定规则的文件路径，类型为字符串或字符串组成的数组。
glob匹配规则：
*：匹配0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾。*结尾时可以匹配到路径分隔符不会被匹配到
"js/*.js"：获取js目录下的所有js文件；
"js/*"：获取js目录下的所有文件，不能匹配子目录下的文件。
**：可以匹配路径分隔符，用于匹配0个或多个子目录，需要单独出现。如果出现在末尾，还能匹配任意文件。
"js/**/*.js"：匹配 js 目录及子目录下所有js文件，如 js/a.js 或 js/a/b/c/d.js。
? ：匹配文件路径中的一个字符，不会匹配到路径分隔符，也不能匹配空字符
"js/a?.js"：能匹配 js/ab.js，不能匹配 js/a.js。：匹配指定范围内的一个字符，如果指定范围的首字符是
[...]!或^，则为匹配不在指定范围内的一个字符。
"js/a[0-3].js"：获取js目录下以a开头，第二个字符为0-3之间的js文件。
"js/[^ab].js"：匹配 js/c.js，不匹配 js/cb.js、js/ac.js。
!(pattern|pattern|pattern) ： 匹配（完全且精确地匹配，且不可组合）不符合任何模型之一的字符。注意 | 前后不能有空格，下同。
"js/!(a|b).js"：匹配 js 目录下的 aa.js、ab.js、ba.js、c.js 不匹配 a.js、b.js。 "!src/a.js" : 不包含src下的a.js文件；
?(pattern|pattern|pattern)：匹配多个 pattern 中 0 或 1 个（精确匹配，不可以组合）。
"js/?(a|b).js"：匹配 js 目录下的 a.js、b.js，不匹配 ab.js
+(pattern|pattern|pattern) ： 至少匹配多个 pattern 中的一个。与*(pattern|pattern|pattern) 不用的是，它必须1个及以上，不能为空。
"js/+(a|b)b.js"：匹配 js 目录下的 ab.js、bb.js、ababab.js，不能匹配 abcd.js（也就是说：只允许匹配出现在范围内的字符） ，也不能像 js/*(a|b)b.js 那样匹配 b.js。
*(a|b|c) ： 匹配括号中多个 pattern 中0或任意多个（pattern可相互组合）。
"js/*(a|b|c).js"：匹配 js 目录下的 a.js、ab.js、abc.js、ba.js，不匹配 abcd.js（也就是说：只允许匹配出现在范围内的字符）。
@(pattern|pattern|pattern) 匹配多个 pattern 中的任意一个（即不可以组合，且不能为空或大于1个）。与 ?(pattern|pattern|pattern) 区别是不可为空。
"js/@(a|b)b.js"：匹配 js 目录下的 ab.js、bb.js，不匹配 b.js、abb.js、abc.js。
{}：匹配多个属性
src/{a,b}.js匹配a.js和b.js文件，src/*.{jpg,png,gif}匹配src下所有jpg/png/gif文件
!：排除文件，当有多种匹配模式时可以使用数组，注意先后顺序，后面的规则会覆盖前面的。
gulp.src([*.js,‘!b*.js‘]) //匹配所有js文件，但排除掉以b开头的js文件
options： 控制文件流和输出路径，可选配置。
options.buffer：是否以buffer形式返回file.content，默认是true。
options.read：是否读取该文件，fals返回的file.content为null，默认为true。
options.base：用于切除输入流的路径，base指定的部分路径将不作为dest的输入路径，base默认值为第一个glob规则之前的所有路径。
gulp.src(‘client/js/**/*.js‘) // `**/*.js`为glob规则，默认的base为`client/js/` .pipe(minify()) .pipe(gulp.dest(‘build‘)); //输出‘build/somedir/somefile.js‘，base部分client/js/被省略 gulp.src(‘client/js/tools/helper.js‘) // `helper.js`为glob规则，默认的base为client/js/tools/ .pipe(minify()) .pipe(gulp.dest(‘build‘)); // Writes ‘build/helper.js‘ //如果要保留之前的目录结构，使用{base:’.’},输出build/client/js/tools/helper.js` gulp.src(‘client/js/**/*.js‘, { base: ‘client‘ }) .pipe(minify()) .pipe(gulp.dest(‘build‘)); // 输出‘build/js/somedir/somefile.js‘
2.gulp.dest(path[, options])
dest方法将操作完成后的文件流输出到指定目录。可以pipe到多个文件夹，如果某个文件夹不存在，会自动创建它。只能指定路径，不能指定文件名。文件名采用源文件的名字。
文件被输出的路径是以dest()所给的目标路径根据src()相对路径计算而来，src()的base参数会改变输出路径。
path： 指定文件的输出路径，参数类型为字符串或函数。当前项目根目录以’./’表示。
3.gulp.task(name[, deps], fn)
task定义一个gulp任务
name： 指定任务的名称，参数类型为String，名字中不要有空格，将来可以直接运行；
deps： 该任务依赖的任务（被依赖的任务需要return当前任务的事件流），[String]
fn： 执行该任务的具体操作，如果省略，则只完成依赖的任务。fn通常为调用对应插件的方法，不一定在所有依赖的任务完成后才执行，格式如下：
gulp.task(‘buildStuff‘, [‘taskOne’,’taskTwo’],function() { // Do something that "builds stuff" var stream = gulp.src(/*some source path*/) .pipe(somePlugin()) .pipe(someOtherPlugin()) .pipe(gulp.dest(/*some destination*/)); return stream; //返回才能有先后顺序，否则为并行 //taskOne/taskTwo的fn方法中需要返回流对象/Promise对象或使用cb，并在deps中声明，才能保证当前的操作在依赖的任务完成后执行 });
deps为多个任务时，默认的gulp会一次性同时运行所有的task并且不做任何等待，执行的顺序没有保证。如果需要严格按照顺序执行，需要特别处理（如上所述，前一个任务返回特定对象并当前任务声明依赖前一个任务）。
4.gulp.watch(glob [, opts], tasks)或gulp.watch(glob [, opts, cb])
watch方法是用于监听指定文件的变化，文件一修改就会执行指定的任务或回调函数
glob：需要处理的源文件通配符路径。
opts：类型(可选)：Object 具体参看https://github.com/shama/gaze；
tasks：需要执行的任务的名称数组；
cb(event)：文件变化时执行的回调函数，event对象描述了所监控到的变动
event.type：发生的变动的类型：added, changed 或者 deleted。
event.path：触发了该事件的文件的路径。
gulp.watch(‘js/**/*.js‘, [‘uglify‘,‘reload‘]);
gulp.watch(‘js/**/*.js‘, function(event) {
console.log(‘File ‘ + event.path + ‘ was ‘ + event.type);
});
Node的stream有4种，Readable（只读）、Writable（只写）、Duplex（双向）、Transform（操作被写入数据，然后读出结果）。但是Node的stream只处理内容，没有办法处理目录相关的操作。所以gulp使用的是Vinyl File Object Stream，Vinyl主要用路径（path）和内容（contents）两个属性来描述文件。
可以用vinyl-source-stream把普通的Node Stream转换为Vinyl File Object Stream，在gulp内使用。
//引入工具包 var gulp = require(‘gulp‘); //加载本地gulp var jshint = require("gulp-jshint"); //js代码检查 var less = require("gulp-less"); //编译less文件生成css文件 var cssMinify = require(‘gulp-clean-css‘); //压缩css文件 var concat = require("gulp-concat");//将多个js文件合并为一个 var uglify = require("gulp-uglify");//将js文件压缩，如果js有语法错误，任务会终止 var rename = require("gulp-rename");//将文件重命名，参数为String/fn，可以在文件名前配置输出路径 var del = require("del"); //删除文件，原生的Node模块，也需要install //在编译文件之前删除上次一些不必要的文件，如上次build的temp文件等 gulp.task(‘clean:mobile‘, function (cb) { //cb是gulp传入的回调函数 del([ ‘./src/mobile/**/*‘, // 删除`mobile`目录中的所有文件及目录；若以文件后缀结尾，目录会保存 ‘!./src/mobile/deploy.json‘ // 不希望删掉的这个文件 ], cb); }); //编译less，压缩css gulp.task(‘less‘, function () { gulp.src("./src/less/**/*.less") .pipe(less()) //调用less模块，将less文件编译为css文件，文件名不变 .pipe(cssMinify( { compatibility: ‘ie9,-properties.ieFilters‘, //兼容ie9以上，不保留滤镜 debug:true }, function (detail){ console.log(details.name + ‘: ‘ + details.stats.originalSize); console.log(details.name + ‘: ‘ + details.stats.minifiedSize); } )) //将css文件压缩 .pipe(gulp.dest("./build/css")); //输出目录 }); //检查脚本语法 gulp.task(‘jshint‘, function () { return gulp.src(‘./src/js/**/*.js‘) .pipe(jshint()) //检查js语法 .pipe(jshint.reporter(‘default‘)); //对错误进行提示 }); //合并js，并压缩 gulp.task(‘scripts‘,[‘jshint‘], function () { gulp.src(‘./src/js/**/*.js‘) .pipe(concat(‘all.js‘)) //合并后的文件名字 .pipe(gulp.dest(‘./dest‘)) //合并后的输出目录 .pipe(rename("all.min.js")) //将文件重命名 .pipe(uglify().on(‘error‘, function(e){console.log(e);})) //压缩问价。添加error事件，如果报错，可以缩小查找范围 .pipe(gulp.dest("./build")) }); //default执行全部依赖的任务 gulp.task(‘default‘,[‘clean:mobile‘,‘less‘,‘scripts‘]);
标签：nts 思想 输出 root mis cnp 重命名 回调 变化
原文地址：http://www.cnblogs.com/kevin2chen/p/6746334.html
