gulp及插件安装、应用

1、创建项目文件夹，全局安装gulp：$sudo npm install --global gulp

2、项目初始化： $ npm init

3、作为项目的开发依赖(devDependencies)安装：$npm install --save-dev gulp

出现node_modules / package.json 文件夹

4、 在项目根目录下创建一个名为gulpfile.js的文件：

$ lanou$ touch gulpfile.js

  var gulp=require('gulp')
  gulp.task('default',function(){

  console.log('Hello Wrold')
  })

5、运行gulp : $gulp 输出 Hello wrold

6、安装插件：concat-合并 jsmin-js压缩 rename-加后缀

$sudo npm install --save-dev gulp-concat

$ npm install --save-dev gulp-jsmin

$ npm install --save-dev gulp-rename

安装好后，我们可以观察package.json的内容

{
"name": "fack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-jsmin": "^0.1.5",
"gulp-rename": "^1.2.2"
}
}

注： name：为自己安装中命得名 ，后几个为安装的插件信息，插件的另一种安装方法：可以把package.json复制到一个文件夹，即本段内容，终端运行 $ npm install 即安装了上述四个插件，（在node.js环境下）

gulpfile.js中代码演示：

var gulp = require('gulp');
var  concat=require('gulp-concat')
var jsmin=require('gulp-jsmin')
  var rename=require('gulp-rename')

gulp.task('b', function() {
// 将你的默认的任务代码放在这
console.log("nimei")
});

gulp.task("yasuo",function(){

gulp.src('js/*js')
.pipe(concat('new.js'))
.pipe(jsmin())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('newJs/'))

})

gulp.task('a',function(){

console.log( 'hello 王松'    )

}  )
gulp.task('jjj',['a','b','c'],function(){

console.log( 'hebing')

})

gulp.task('c',function(){

console.log( 'hello heffj'    )

 }  )

文件夹一览：

注释：gulp有5个基本方法：src、dest、task、run、watch

    gulp.src()

gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，一般有以下几种形式：

js/app.js ：指定确切的文件名
js/*.js ：某个目录所有后缀名为js的文件
js/**/*.js ：某个目录及其所有子目录中的所有后缀名为js的文件
!js/app.js ：除了js/app.js以外的所有文件
*.+(js|css) ：匹配项目根目录下，所有后缀名为js或css的文件

 src方法的参数还可以是一个数组，用来指定多个成员：

 gulp.src(['js/**/*.js', '!js/**/*.min.js']);



 gulp.dest()

gulp模块的dest方法，可以用来传送文件，同时写入文件到指定目录。可以重复的发送传递给它的数据，因此可以将文件传送到多个目录中。简单的例子：

 gulp.src('./client/templates/*.jade')  
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));

gulp.task()

 gulp模块的task方法，用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数：

gulp.task('greet', function () {  
 console.log('Hello world!');
});

task方法还可以指定按顺序运行的一组任务：

gulp.task('build', ['css', 'js', 'imgs']);

 上面代码先指定build任务，它按次序由css、js、imgs三个任务所组成。 注意: 由于每个任务都是异步调用，所以没有办法保证js任务的开始运行的时间，正好是css任务运行结束时间。

 如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块：

gulp.task('css', ['greet'], function () {  
  // Deal with CSS here
});

上面代码表明，css任务依赖greet任务，所以css一定会在greet运行完成后再运行。

如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务：

gulp.task('default', function () {  
  // Your default task
 });
 gulp.run()

 gulp模块的run方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。 注意： 任务是尽可能多的并行执行的，并且可能不会按照指定的顺序运行：

gulp.run('scripts','copyfiles','builddocs');

gulp.run('scripts','copyfiles','builddocs', function(err) {  
// 所有任务完成，或者触发错误而终止
 });

 可以使用 gulp.run 在其他任务中运行任务。也可以在默认任务中使用 gulp.run 组织多个更小的任务为一个大任务。
 gulp.watch()

 gulp模块的watch方法，用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务：

 gulp.task('watch', function () {  
  gulp.watch('templates/*.tmpl.html', ['build']);
 });

 上面代码指定，一旦templates目录中的模板文件发生变化，就运行build任务。

 watch方法也可以用回调函数，代替指定的任务：

gulp.watch('templates/*.tmpl.html', function (event) {  
 console.log('Event type: ' + event.type); 
console.log('Event path: ' + event.path); 
});

另一种写法是watch方法所监控的文件发生变化时（修改、增加、删除文件），会触发change事件，可以对change事件指定回调函数：

var watcher = gulp.watch('templates/*.tmpl.html', ['build']);

 watcher.on('change', function (event) {  
 console.log('Event type: ' + event.type);
 console.log('Event path: ' + event.path);
 });

除了change事件，watch方法还可能触发以下事件：

end：回调函数运行完毕时触发。
error：发生错误时触发。
ready：当开始监听文件时触发。
nomatch：没有匹配的监听文件时触发。

watcher对象还包含其他一些方法：

watcher.end() ：停止watcher对象，不会再调用任务或回调函数。
watcher.files() ：返回watcher对象监视的文件。
watcher.add(glob) ：增加所要监视的文件，它还可以附件第二个参数，表示回调函数。
watcher.remove(filepath) ：从watcher对象中移走一个监视的文件。

学完这些就可以到其官网上找插件了，毕竟插件才是王道。

终端代码一览：

代码：
Last login: Mon May 16 15:20:21 on ttys000
 52:~ lanou$ cd desktop
 52:desktop lanou$ nodejs
-bash: nodejs: command not found
 52:desktop lanou$ cd nodejs
 52:nodejs lanou$ sudo npm install --global gulp    全局安装gulp
 npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
 npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
  /usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp/bin/gulp.js
  gulp@3.9.1 /usr/local/lib/node_modules/gulp
  ├── interpret@1.0.1
 ├── pretty-hrtime@1.0.2
├── deprecated@0.0.1
 ├── archy@1.0.0
├── minimist@1.2.0
├── semver@4.3.6
├── tildify@1.2.0 (os-homedir@1.0.1)
 ├── v8flags@2.0.11 (user-home@1.1.1)
 ├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, mkdirp@0.5.1, strip-bom@1.0.0, defaults@1.0.3, vinyl@0.4.6, glob-stream@3.1.18, through2@0.6.5, glob-watcher@0.0.6)
  ├── chalk@1.1.3 (supports-color@2.0.0, escape-string-regexp@1.0.5, ansi-styles@2.2.1, has-ansi@2.0.0, strip-ansi@3.0.1)
  ├── liftoff@2.2.1 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.2, resolve@1.1.7, findup-sync@0.3.0)
 └── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, beeper@1.1.0, object-assign@3.0.0, replace-ext@0.0.1, has-gulplog@0.1.0, fancy-log@1.2.0, gulplog@1.0.0, vinyl@0.5.3, multipipe@0.1.2, lodash.template@3.6.2, through2@2.0.1, dateformat@1.0.12)
 52:nodejs lanou$ npm init
This utility will walk you through creating a package.json file.
 It only covers the most common items, and tries to guess sensible defaults.

 See `npm help json` for definitive documentation on these fields
  and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
   save it as a dependency in the package.json file.

 Press ^C at any time to quit.
  name: (nodejs) fack
version: (1.0.0)
 description:
 entry point: (index.js)
test command:
 git repository:
 keywords:
 author:
 license: (ISC)
  About to write to /Users/lanou/Desktop/nodejs/package.json:

{
  "name": "fack",
 "version": "1.0.0",
  "description": "",
 "main": "index.js",
 "scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
"license": "ISC"
 }


Is this ok? (yes) yes       yes
52:nodejs lanou$ sudo npm install --save-dev gulp 
npm WARN package.json fack@1.0.0 No description
npm WARN package.json fack@1.0.0 No repository field.
 npm WARN package.json fack@1.0.0 No README data
 npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
 npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
 npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
 gulp@3.9.1 node_modules/gulp
 ├── interpret@1.0.1
 ├── pretty-hrtime@1.0.2
 ├── deprecated@0.0.1
 ├── archy@1.0.0
 ├── minimist@1.2.0
 ├── semver@4.3.6
 ├── tildify@1.2.0 (os-homedir@1.0.1)
 ├── v8flags@2.0.11 (user-home@1.1.1)
 ├── chalk@1.1.3 (ansi-styles@2.2.1, escape-string-regexp@1.0.5, supports-color@2.0.0, strip-ansi@3.0.1, has-ansi@2.0.0)
  ├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
 ├── liftoff@2.2.1 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.2, resolve@1.1.7, findup-sync@0.3.0)
 ├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, mkdirp@0.5.1, through2@0.6.5, strip-bom@1.0.0, vinyl@0.4.6, defaults@1.0.3, glob-stream@3.1.18, glob-watcher@0.0.6)
  └── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, object-assign@3.0.0, lodash._reescape@3.0.0, beeper@1.1.0, replace-ext@0.0.1, fancy-log@1.2.0, has-gulplog@0.1.0, gulplog@1.0.0, multipipe@0.1.2, through2@2.0.1, vinyl@0.5.3, lodash.template@3.6.2, dateformat@1.0.12)
 52:nodejs lanou$ touch gulpfile.js
 52:nodejs lanou$ gulp
 [15:28:22] Using gulpfile ~/Desktop/nodejs/gulpfile.js
 [15:28:22] Starting 'default'...
 nimei
 [15:28:22] Finished 'default' after 111 μs
 52:nodejs lanou$ sudo npm install --save-dev gulp-concat
 Password:
 npm WARN package.json fack@1.0.0 No description
 npm WARN package.json fack@1.0.0 No repository field.
 npm WARN package.json fack@1.0.0 No README data
 gulp-concat@2.6.0 node_modules/gulp-concat
 ├── through2@0.6.5 (xtend@4.0.1, readable-stream@1.0.34) 
 ├── gulp-util@3.0.7 (array-uniq@1.0.2, array-differ@1.0.0, lodash._reinterpolate@3.0.0, object-assign@3.0.0, lodash._reescape@3.0.0, beeper@1.1.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.2.0, has-gulplog@0.1.0, fancy-log@1.2.0, vinyl@0.5.3, multipipe@0.1.2, chalk@1.1.3, gulplog@1.0.0, through2@2.0.1, lodash.template@3.6.2, dateformat@1.0.12)
   └── concat-with-sourcemaps@1.0.4 (source-map@0.5.6)
 52:nodejs lanou$ npm install --save-dev gulp-jsmin
 npm WARN package.json fack@1.0.0 No description
 npm WARN package.json fack@1.0.0 No repository field.
 npm WARN package.json fack@1.0.0 No README data
 npm WARN deprecated graceful-fs@2.0.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
 gulp-jsmin@0.1.5 node_modules/gulp-jsmin
 ├── filesize@2.0.4
 ├── graceful-fs@2.0.3
├── map-stream@0.0.4
├── gulp-rename@1.1.0
 ├── temp-write@0.1.1 (tempfile@0.1.3)
  ├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, vinyl@0.2.3, multipipe@0.1.2, through2@0.5.1, chalk@0.5.1, dateformat@1.0.12, lodash.template@2.4.1)
 └── jsmin-sourcemap@0.16.0 (jsmin2@1.1.9, source-map-index-generator@0.1.2)
 52:nodejs lanou$ gulp dh
 [15:38:20] Using gulpfile ~/Desktop/nodejs/gulpfile.js
 [15:38:20] Starting 'dh'...
 nimei
 [15:38:20] Finished 'dh' after 107 μs
 52:nodejs lanou$ js
 -bash: js: command not found
 52:nodejs lanou$ cd js
 52:js lanou$ touch 1.js
 52:js lanou$ touch 2.js
52:js lanou$ gulp hangmingyang
[16:00:31] Working directory changed to ~/Desktop/nodejs
   [16:00:31] Using gulpfile ~/Desktop/nodejs/gulpfile.js
[16:00:31] Starting 'hangmingyang'...
[  16:00:31] 'hangmingyang' errored after 6.49 ms
 [16:00:31] ReferenceError: concat is not defined
at Gulp.<anonymous> (/Users/lanou/Desktop/nodejs/gulpfile.js:10:25)
at module.exports (/Users/lanou/Desktop/nodejs/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/lanou/Desktop/nodejs/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/lanou/Desktop/nodejs/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/lanou/Desktop/nodejs/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
at Function.Module.runMain (module.js:443:11)
at startup (node.js:139:18)
 52:js lanou$ gulp hangmingyang
 [16:04:19] Working directory changed to ~/Desktop/nodejs
 /Users/lanou/Desktop/nodejs/gulpfile.js:3
vaar jsmin=require('gulp-jsmin')
 ^^^^^

 SyntaxError: Unexpected identifier
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:193:16)
at module.exports (/usr/local/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)
  52:js lanou$ gulp hangmingyang
 [16:05:19] Working directory changed to ~/Desktop/nodejs
 [16:05:19] Using gulpfile ~/Desktop/nodejs/gulpfile.js
[16:05:19] Starting 'hangmingyang'...
  [   16:05:19] Finished 'hangmingyang' after 9.69 ms
 [16:05:19] gulp-jsmin: ✔ new.js
  52:js lanou$ gulp hangmingyang
  [16:06:07] Working directory changed to ~/Desktop/nodejs
 [16:06:07] Using gulpfile ~/Desktop/nodejs/gulpfile.js
 [16:06:07] Starting 'hangmingyang'...
 [16:06:07] Finished 'hangmingyang' after 9.11 ms
 [16:06:07] gulp-jsmin: ✔ new.js
 52:js lanou$ npm install
 npm WARN package.json fack@1.0.0 No description
 npm WARN package.json fack@1.0.0 No repository field.
 npm WARN package.json fack@1.0.0 No README data
 52:js lanou$ cd ..
 52:nodejs lanou$ cd ..
52:desktop lanou$ cd yj
 52:yj lanou$ npm install
 npm WARN package.json fack@1.0.0 No description
 npm WARN package.json fack@1.0.0 No repository field.
npm WARN package.json fack@1.0.0 No README data
 npm WARN deprecated graceful-fs@2.0.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
 npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
    npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
 npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
gulp-concat@2.6.0 node_modules/gulp-concat
 ├── concat-with-sourcemaps@1.0.4 (source-map@0.5.6)
├── through2@0.6.5 (xtend@4.0.1, readable-stream@1.0.34)
 └── gulp-util@3.0.7 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, beeper@1.1.0, object-assign@3.0.0, replace-ext@0.0.1, minimist@1.2.0, vinyl@0.5.3, has-gulplog@0.1.0, fancy-log@1.2.0, chalk@1.1.3, gulplog@1.0.0, through2@2.0.1, multipipe@0.1.2, lodash.template@3.6.2, dateformat@1.0.12)

  gulp-jsmin@0.1.5 node_modules/gulp-jsmin
   ├── filesize@2.0.4
  ├── graceful-fs@2.0.3
 ├── map-stream@0.0.4
 ├── gulp-rename@1.1.0
├── temp-write@0.1.1 (tempfile@0.1.3)
  ├── jsmin-sourcemap@0.16.0 (jsmin2@1.1.9, source-map-index-generator@0.1.2)
  └── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, through2@0.5.1, vinyl@0.2.3, chalk@0.5.1, multipipe@0.1.2, lodash.template@2.4.1, dateformat@1.0.12)

gulp@3.9.1 node_modules/gulp
├── interpret@1.0.1
├── deprecated@0.0.1
├── pretty-hrtime@1.0.2
 ├── archy@1.0.0
   ├── minimist@1.2.0
├── semver@4.3.6
├── tildify@1.2.0 (os-homedir@1.0.1)
├── v8flags@2.0.11 (user-home@1.1.1)
 ├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, strip-ansi@3.0.1, has-ansi@2.0.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
 ├── gulp-util@3.0.7 (array-uniq@1.0.2, array-differ@1.0.0, beeper@1.1.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, object-assign@3.0.0, replace-ext@0.0.1, vinyl@0.5.3, has-gulplog@0.1.0, fancy-log@1.2.0, gulplog@1.0.0, through2@2.0.1, multipipe@0.1.2, lodash.template@3.6.2, dateformat@1.0.12)
├── vinyl-fs@0.3.14 (graceful-fs@3.0.8, through2@0.6.5, mkdirp@0.5.1, vinyl@0.4.6, defaults@1.0.3,  strip-   bom@1.0.0, glob-watcher@0.0.6, glob-stream@3.1.18)
└── liftoff@2.2.1 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.2, resolve@1.1.7, findup-sync@0.3.0)
 52:yj lanou$ cd ..