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 ..
