Gulp初体验

让一个gulp菜鸟来讲述一下gulp安装和简单的使用过程。
注：本人windows系统，开始的时候着实头痛了一番，但是mac安装流程差异不大。

一、安装gulp

1.安装node

因为gulp是基于node实现的，所以要先安装node，没有安装的可以先安装一下node，到官网就可以下载安装，很简单。

在命令行或者终端执行下面命令就可以知道node是否安装成功，如果成功会显示node的版本号

node -v

由于安装node之后会自动安装npm，npm就是一个node的包管理工具，想具体了解的可以到npm官网或者看一下阮一峰老师写的这篇文章，这里我就不细说了。

查看npm版本号

npm -v

2.全局安装gulp

npm install -g gulp

如果有遇到权限问题(以下权限问题都可以用此方法)，windows可以右键命令行“以管理员身份打开”，mac可以使用sudo获得权限sudo npm install -g gulp。

3.在项目中安装gulp

npm install --save-dev gulp

–save-dev的意思呢就是来更新package.json文件，更新devDependencies值，以表明项目需要依赖gulp。

注：其实到这一步gulp已经安装成功了，你可以输入gulp -v 查看gulp的版本了，但是要使用gulp还需要一步。

4.创建gulpfile.js文件

在项目根目录下创建gulpfile.js文件，内容如下：

var gulp = require('gulp');
//这是gulp的一个默认任务
gulp.task('default', function() {
    // 将你的默认的任务代码放在这
    //比如我们就写hello gulp
    console.log("hello gulp");
});

然后在项目的根目录下执行命令

gulp

二、使用gulp

完成上面的操作之后只能说是安装了gulp，如果要真的使用gulp那些很棒的功能，还要安装一些东西。

作为gulp初学者，我只使用了比较基础的功能，不过这已经让我对gulp爱不释手。

注：以下是各功能所需要安装的组件命令。

1.js代码检查功能

npm install gulp-jshint

2.编译sass文件

npm install gulp-sass

3.合并文件

npm install gulp-concat

4.压缩文件

npm install gulp-uglify

5.文件重命名

npm install gulp-rename

这里放一段已经用烂的示例代码，不过麻雀虽小五脏俱全，这段代码搞明白，上面说的功能就没什么问题了。
注： gulp只有5个方法，分别是task、run、watch、src和dest。

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');

// 检查js/目录下的js文件有没有报错或警告
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合并js/目录下得所有的js文件并输出到dist/目录，然后gulp会重命名、压缩合并的文件，输出到dist/目录
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'));
});

// 默认任务
//创建了一个基于其他任务的default任务,使用.run()方法关联和运行上面定义的任务，使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

如果gulpfile.js里没有创建默认任务，比如这样：

gulpfile.js

var gulp = require('gulp'); 
var sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

可以直接执行

gulp sass

不过一般都不会这么一个一个任务的执行，如果测试或者特殊情况的话可以试一试。

三、总结

      刚开始安装的时候也出现一些小问题，尤其是jshint组件安装的时候总是有bug让我很头疼，后来觉得这个组件其实很鸡肋，还有sass安装的时候很容易被墙，多安几次就好了。
      其实gulp还有很多功能，我还只学了冰山一角，以后慢慢学习,多多实践，只有实际操作了才知道哪里有问题、如何解决，提高自己。