思维导图
一、简介
1. nodeJS
nodeJS的出现，可以算是前端里程碑式的一个事件，它让前端攻城狮们摆脱了浏览器的束缚，踏上了一个更加宽广的舞台。前端的可能性，从此更加具有想象空间。
随着一系列基于nodes的应用/工具的出现，工作中与nodeJS打交道的机会越来越多。无论在node应用的开发，还是使用中，包管理都扮演着一个很重要的作用。NPM（node package manager），作为node的包管理工具，极大地便利了我们的开发工作，很有必要了解一下。
2. NPM
NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。
NPM的背后，是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。
3. gulp
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
二、安装gulp
1. nodeJS（上官网直接安装 nodeJS官网）
2. gulp
1）全局安装gulp
$ sudo npm install -g gulp
2）在项目文件夹下进行npm初始化，生成package.json
$ npm init
//初始化安装过程中，会提示设置package文件的参数，只要设置name就行了（不要叫gulp），不然开发依赖好像安装会报错
//其他的如果没有需要设定的，一路回车就行了
3）开发依赖安装
$ npm install gulp-name --save-dev
//安装成功后会在package.json文件中看到安装版本记录
三、gulp使用
1. 新建gulpfile.js
2. 调用gulp
var gulp = require('gulp')
var name = require('gulp-name') //插件调用
3. gulp使用方法
1）基本语法
-
创建目标
gulp.task('',[],function(){})//例子1（默认）： gulp.task('default',function() { console.log('我是default') }); //运行结果： $ gulp //终端运行命令，后面不跟东西，默认执行default [21:54:33] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js [21:54:33] Starting 'default'... 我是default [21:54:33] Finished 'default' after 120 μs //例子2（自定义） gulp.task('task1',function () { console.log('我是task1') }) //运行结果： $ gulp task1 //后面跟上自定义的任务名称 [21:58:00] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js [21:58:00] Starting 'task1'... 我是task1 [21:58:00] Finished 'task1' after 121 μs //例子3（复合） gulp.task('default',['task1'],function() { console.log('我是default') }); //运行结果： $ gulp //先执行自定义，后执行默认 [22:01:33] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js [22:01:33] Starting 'task1'... 我是task1 [22:01:33] Finished 'task1' after 99 μs [22:01:33] Starting 'default'... 我是default [22:01:33] Finished 'default' after 38 μs 目标文件（举例看后面插件举例）
gulp.src('')目标输出（举例看后面插件举例）
gulp.dest('')管道（上文的输出是下文的输入）（举例看后面插件举例）
.pipe()
2）gulp插件使用（插件网站）
插件安装
$ npm install gulp-name1 gulp-name2 --save-dev插件调用
var name = require('gulp-name')-
插件语法
.pipe(name())//举例 gulp.task('min',function () { gulp.src('js/*.js') //外部引用 .pipe(concat('new.js')) //合并多个js文件，并生成一个新的文件 .pipe(jsmin()) //压缩这个新生成的js文件 .pipe(gulp.dest('newJS/')) //将新生成的文件放入新的文件夹中 })
