这年头，不用点道具（gulp），你都很差意思说你是作前端的

若是你之前没用用过任何任务脚本（task runner）或者命令行工具，那也不要惧怕，这篇文章能够一步步教你上手gulp，升职CEO，赢娶白富美，走上人生巅峰，吼吼吼，好开森，有木有？！我会分为五步向你介绍gulp并帮助你完成一些屌炸天的事情。话很少说，直接开始吧。

第一步：安装Node

首先，最基本也最重要的是，咱们须要搭建Node环境。访问node官网，而后点击大大的绿色的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。

在命令行中输入

sudo npm install -g gulp

1. sudo是以管理员身份执行命令，通常会要求输入电脑密码；

2. npm是安装node模块的工具，执行install命令；

3. -g表示在全局环境安装，以便任何项目都能使用它；

4. 最后，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后咱们须要告诉它要为咱们执行哪些任务，首先，咱们本身须要弄清楚项目须要哪些任务。这里举例出几个很经常使用的功能。

• 检查js 这里使用的是gulp-jshint模块来完成这项功能；

• 编译sass sass是一种css预处理语言，它弥补了css自己没法完成像其它编程语言同样的嵌套、继承、设置变量等工做。这里使用gulp-compass模块来完成这项功能。使用gulp-compass须要先安装compass，由于这篇文章的主角是gulp，因此暂且不对compass作过多说明了。若是想知道copmass安装方法能够先自行百度，之后呢，我也会出有关compass方面的文章，敬请期待咯~

• 合并js 这里使用gulp-concat模块来完成这项功能；

• 压缩并重命名合并后的js 这里使用gulp-uglify模块和gulp-rename模块配合来完成这项任务。

安装依赖

npm install gulp-jshint gulp-compass gulp-concat gulp-uglify gulp-rename --save-dev

提醒下，若是以上命令提示权限错误，须要添加sudo再次尝试。

新建gulpfile文件

如今，组件都安装完毕，咱们须要新建gulpfile文件以指定gulp须要为咱们完成什么任务。

gulp只有五个方法： task，run，watch，src，和dest，在项目根目录新建一个js文件并命名为gulpfile.js。我按照代码书写顺序贴上代码并依次讲解，你们把每一块代码拼接在一块儿就是完整文件了。多感人啊~多么有节操呀~你们用起来一点不打麻烦~

引入模块

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    compass = require('gulp-compass'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    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文件有没有报错或警告。

Compass任务

gulp.task('compass', function() {
    gulp.src(['scss/**/**/*.scss','!scss/lib/*.scss'])
        .pipe(compass({
            config_file: './config.rb',
            css: 'css',
            sass: 'scss',
            comments: true
        }))
        .pipe(gulp.dest('css'));
});

Compass任务会编译scss/目录下二级文件夹内的scss文件，并把编译完成的css文件保存到/css目录中。这里我屏蔽了scss/lib/目录，主要由于个人习惯是把reset文件或者base文件写在lib目录下，而这些文件通常都是被非公用的scss文件引入来使用的，不多单独在页面内引入，因此就不特地编译了。

Compass配置

这里我要着重说明一下gulp-compass中的几个相当重要的配置项。

comments
默认：false
描述：是否显示注释。

css
默认：css
描述：指定输出的css文件目录。

sass
默认：sass
描述：指定待编译的scss文件目录。

css sass配置内容必需要和config.rb文件中的css sass项配置内容相同，不然没法完成编译。这件事情灰常重要，请自行在心中默念三遍。

Watch任务

主要的做用是检测scss/目录下有没有文件更改，若是有的话，运行compass任务来对sass文件进行编译。

gulp.task('watch', function() {
    gulp.watch(['scss/**/**/*.scss','!scss/lib/*.scss'], ['compass']);
});

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', 'compass', 'scripts');
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

这时，咱们建立了一个基于其余任务的default任务。使用.run()方法关联和运行咱们上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其余任务。

如今，回到命令行，能够直接运行gulp任务了。

gulp

这将执行定义的default任务，换言之，这和如下的命令式同一个意思

gulp default

固然，咱们能够运行在gulpfile.js中定义的任意任务，好比，如今运行sass任务：

gulp compass

结束语

如今已经作到了设置gulp任务而后运行他们，如今再回顾下以前学习的。

1. 学习了安装Node环境

2. 学习了简单使用命令行

3. 学习了用命令行进入项目目录

4. 学习了使用npm和安装gulp

5. 学习了如何运行gulp任务

另外，有一些参考资源供进一步学习：

1. npm上得gulp组件

2. gulp的Github主页

3. 官方package.json文档

本文改编自老婆婆的文章《前端构建工具gulp入门教程》

---

1. npm是基于命令行的node包管理工具，它能够将node的程序模块安装到项目中，在npm官网中能够查看和搜索全部可用的程序模块。拽拽的npm管理着众多的基于node的前端工具，包括我们此次的主角gulp。若是想查询gulp各类模块的api，只要经过这个网站搜索就好啦，简直便利到爆，谁用谁知道。 ↩