本文假定你之前没有效过任何使命剧本（task runner）和敕令行东西，一步步教你上手Gulp。不要怕，它实在很简朴，我会分为五步向你引见gulp并协助你完成一些惊人的事变。那就直接最先吧。
第一步：装置Node
起首，最基本也最主要的是，我们须要搭建node环境。接见http://nodejs.org，然后点击大大的绿色的install按钮，下载完成后直接运转顺序，就统统准备就绪。npm会跟着装置包一同装置，稍后会用到它。
第二步：运用敕令行
或许如今你还不是很相识什么是敕令行——OSX中的终端（Terminal），windows中的敕令提醒符（Command Prompt），但很快你就会晓得。它看起来没那末简朴，但一旦控制了它的秘诀，就能够够很轻易的实行许多敕令行顺序，比方Sass，Yeoman和Git等，这些都是异常有效的东西。
假如你很熟悉敕令行，直接跳到步骤四。
为了确保Node已准确装置，我们实行几个简朴的敕令。
node -v
回车（Enter），假如准确装置的话，你会看到所装置的Node的版本号，接下来看看npm。
npm -v
这一样能获得npm的版本号。
假如这两行敕令没有获得返回，能够node就没有装置准确，尝试重启下敕令行东西，假如还不可的话，只能回到第一步举行重装。
第三步：定位到项目
如今，我们已大抵相识了敕令行而且晓得怎样简朴运用它，接下来只须要两个简朴的敕令就能够定位到文件目次并看看目次里都有些什么文件。
- cd，定位到目次
- ls，列出文件列表
发起多敲敲这两个敕令，相识文件体系并晓得文件都在那里。
习气运用了这两个敕令后，就要进入我们的项目目次，这个目次各不相同，举个例子，这是我进入我项目目次的敕令：
cd /Applications/XAMPP/xamppfiles/htdocs/my-project
胜利进入项目目次后，我们最先装置gulp。
第四步：装置gulp
我们已晓得怎样运用敕令行，如今尝试点新的东西，熟悉npm然后装置gulp。
NPM是基于敕令行的node包管理东西，它能够将node的顺序模块装置到项目中，在它的官网中能够检察和搜刮一切可用的顺序模块。
在敕令行中输入
sudo npm install -g gulp
- sudo是以管理员身份实行敕令，平常会请求输入电脑暗码
npm是装置node模块的东西，实行install敕令
-g示意在全局环境装置，以便任何项目都能运用它
- 末了，gulp是将要装置的node模块的名字
运转时注重检察敕令行有无毛病信息，装置完成后，你能够运用下面的敕令检察gulp的版本号以确保gulp已被准确装置。
gulp -v
接下来，我们须要将gulp装置到项目当地
npm install —-save-dev gulp
这里，我们运用—-save-dev来更新package.json文件，更新devDependencies值，以表明项目须要依靠gulp。
Dependencies能够向其他介入项目的人指明项目在开辟环境和临盆环境中的node模块依懒关联，想要越发深切的相识它能够看看package.json文档。
第五步：新建Gulpfile文件，运转gulp
装置好gulp后我们须要通知它要为我们实行哪些使命，起首，我们本身须要弄清楚项目须要哪些使命。
- 搜检Javascript
- 编译Sass（或Less之类的）文件
- 兼并Javascript
- 紧缩并重定名兼并后的Javascript
装置依靠
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
提醒下，假如以上敕令提醒权限毛病，须要增加
sudo再次尝试。
新建gulpfile文件
如今，组件都装置终了，我们须要新建gulpfile文件以指定gulp须要为我们完成什么使命。
gulp只要五个要领： task，run，watch，src，和dest，在项目根目次新建一个js文件并定名为gulpfile.js，把下面的代码粘贴进去：
gulpfile.js
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 搜检剧本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 兼并，紧缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默许使命
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
如今，分段诠释下这段代码。
引入组件
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
这一步，我们引入了中心的gulp和其他依靠组件，接下来，离开建立lint, sass, scripts 和 default这四个差别的使命。
Lint使命
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
Link使命会搜检js/目次下得js文件有无报错或正告。
Sass使命
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
Sass使命会编译scss/目次下的scss文件，并把编译完成的css文件保存到/css目次中。
Scripts 使命
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
scripts使命会兼并js/目次下得一切得js文件并输出到dist/目次，然后gulp会重定名、紧缩兼并的文件，也输出到dist/目次。
default使命
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
这时候，我们建立了一个基于其他使命的default使命。运用.run()要领关联和运转我们上面定义的使命，运用.watch()要领去监听指定目次的文件变化，当有文件变化时，会运转回调定义的其他使命。
如今，回到敕令行，能够直接运转gulp使命了。
gulp
这将实行定义的default使命，换言之，这和以下的敕令式同一个意义
gulp default
固然，我们能够运转在gulpfile.js中定义的恣意使命，比方，如今运转sass使命：
gulp sass
(Kimi: 哇塞，酷比了哎~)
结束语
如今已做到了设置gulp使命然后运转他们，如今再回忆下之前进修的。
- 进修了装置Node环境
- 进修了简朴运用敕令行
- 进修了用敕令行进入项目目次
- 进修了运用npm和装置gulp
- 进修了怎样运转gulp使命
别的，有一些参考资本供进一步进修：
本文译自http://travismaynard.com/writing/getting-started-with-gulp
