gulp使用指南

我写这篇博客的目的只是为了帮助那些还不会gulp的人能够完整的使用gulp这个工具来协助你完成web开发！
我希望这篇博客可以帮助你，那样我才会快乐!

这是一篇gulp使用指南！在阅读此篇之前，请确保你的电脑已经安装上npm包管理器！

gulp简介。

gulp是一款自动化构建工具,由外国人开发,可以增强你的工作流程!

gulp作用。

• 易于使用

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

• 构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

• 插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

• 易于学习

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

gulp安装。

在安装之前,你需要新建一个文件夹,但是名字不能为gulp。

首先，你需要运行以下命令：

$ npm init

这是让npm初始化一下,一路按回车。

这时,你的根目录下就有了package.json这样一个配置文件！

然后，你在安装一下gulp：

$ npm install gulp --save-dev

这条命令是让gulp保存在根目录下，并且作为扩展工具。

最后,你查看一下gulp的版本号,如果出来,就说明成功了：

$ glup -v
[20:11:34] CLI version 3.9.1
[20:11:34] Local version 3.9.1

至此,便成功的安装好了,你现在激动不？好戏还在后面！

gulp案例。

接下来,就由我给大家做一个案例,如何使用gulp这款工具。

首先,我们在根目录下新建一个文件夹,比如src,在它下面又有img,css,js,index.html;

然后,开始下载必备的gulp包,这里有：

```
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-concat-css": "^2.3.0",
"gulp-csscomb": "^3.0.8",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.3.0",
"gulp-less": "^3.3.2",
"gulp-uglifycss": "^1.0.8",
"gulp-uglyfly": "^1.4.2"
```

运行此条命令可以下载以上这些包：

$ npm install <你要下载的包名> --save-dev

下载完以后,你需要到配置文件package.json中查看也没有添加到devDependencies中,如果有,就说明成功了！

接着需用建立一个名为gulpfile.js的文件,然后输入以下命令：

//这些主要是引刚才下载的包
var gulp = require('gulp'); 
var less = require('gulp-less');
var uglifycss = require('gulp-uglifycss');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var concat = require('gulp-concat');
var uglyfly = require('gulp-uglyfly');
var img = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var browserSync = require('browser-sync').create();

//接下来就是建立任务：

//这个任务是把less编译成css
gulp.task('style',function(){
    gulp.src(['src/css/*.less','!src/css/_*.less'])    //入口文件  *在css下面以.less所有文件编译
       .pipe(less())
       .pipe(autoprefixer({
          browsers: ['Android 2.3',
          'Android >= 4',
          'Chrome >= 20',
          'Firefox >= 24', // Firefox 24 is the latest ESR 
          'Explorer >= 8',
          'iOS >= 6',
          'Opera >= 12',
          'Safari >= 6'],
           cascade: false
      }))
       .pipe(csscomb())
       .pipe(uglifycss())                     //less编译
       .pipe(gulp.dest('dest/css'))  //出口文件
});
//这个任务是把所有的js文件合并成一个名为main.js的文件
gulp.task('script',function(){
    gulp.src('src/js/*.js')
      .pipe(concat('main.js'))
      .pipe(uglyfly())
      .pipe(gulp.dest('dest/js'))
});

//这个任务是把图片复制,压缩
gulp.task('img',function(){
    gulp.src('src/img/*.*')
      .pipe(img())
      .pipe(gulp.dest('dest/img'))
});

//这个任务是把所有的html文件压缩
gulp.task('htmlmin',function(){
    gulp.src('src/*.html')
      .pipe(htmlmin({
         collapseWhitespace: true,
         removeComments: true
      }))
      .pipe(gulp.dest('dest'))
});

//这个任务就是游览器热更新
var reload = browserSync.reload;
gulp.task('server',function(){
    browserSync.init({
        server: {
            baseDir: "dest"
        }
    });
    gulp.watch('src/*.html',['htmlmin']).on("change",reload);
    gulp.watch('src/js/*.js',['script']).on("change",reload);
    gulp.watch('src/css/*.less',['style']).on("change",reload);
    gulp.watch('src/img/*.*',['img']).on("change",reload);
})

最后大功告成！

总结。

gulp作为一款工具目前非常流行,希望大家多用它。此片博文还有许多不足之处,希望大家批评指正。