初认gulp

为什么是Gulp?

类似Gulp的工具，我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。
已经有非常多的文章论证它们之前的异同，你随便搜一下就知道了。
主要区别是你如何使用他们构建自动化工作流。与Grunt相比，Gulp更加简洁，执行效率更高。
让我们继续学习Gulp并搭建一个简单的工作流。

安装（以mac版本为例）

1、安装node

安装Gulp之前你需要先安装Node.js。（如何安装node请百度）

2、全局安装gulp

打开终端输入指令
sudo npm install gulp -g
下载安装gulp
3、在项目中创建gulp
首先打开要使用gulp的项目在项目中手动创建Gulpfile.js和package.json两个文件
package.json文件：这个文件保存着这个项目相关信息。比如你用到的各种依赖（这里主要是插件）
Gulpfile.js文件：这个文件主要是配置和调用你所下载好的插件

然后在使用gulp项目中打开终端，如：

屏幕快照 2017-01-05 上午8.59.44.png

在终端中输入 npm init
会出现

屏幕快照 2017-01-05 上午9.03.46.png

不想填就一路回车
你可以打开package.jso文件会出现你刚才在终端中输入的信息，以后下的插件也可以在这看

屏幕快照 2017-01-05 上午9.06.05.png

然后就是在项目中引入gulp了
终端中输入 npm install gulp --save-dev
安装完毕后文件夹中出现

屏幕快照 2017-01-05 上午9.09.33.png

证明gulp依赖加载完毕，可以在项目中使用了

简单使用gulp

如果想使用某种功能，得先加载gulp插件
如
终端下载插件 npm install XXXXXX(以下名称)--save-dev
gulp-minify-css （css压缩）
gulp-minify-html （html压缩）
gulp-rename （重命名）
gulp-uglify （js文件压缩）
gulp-concat （代码合并）
gulp-jshint （js代码检测）
gulp-replace （路径替换）
and soon on······

插件下载完毕后
首先打开Gulpfile.js

使用require 引入gulp和各种插件

    var gulp = require('gulp'),
        minifyCss = require('gulp-minify-css'),
        minifyHtml = require('gulp-minify-html'),
        uglify = require('gulp-uglify'),
        concat = require('gulp-concat'),
        revCollector = require('gulp-rev-collector'),
        replace = require('gulp-replace');

default设置默认执行任务
gulp.task('default',['css','js','html'])
*数组里的参数为下面设置任务的名称
使用gulp.task创建任务
1、css 压缩 合并

gulp.task('css',function () {     
      gulp.src('./a/*.css')  // 要处理的文件路径 如果有多个路径也可以用数组表示         
      .pipe(concat('style.min.css')) //合并文件以及文件输出后的名字 
      .pipe(minifyCss())  // 压缩css文件         
      .pipe(gulp.dest('./b/css')) //处理完文件 输出的路径        
});

2、js压缩合并

gulp.task('js',function () {    
       gulp.src('./a/*.js')  // 要合并的文件路径 如果有多个路径也可以用数组表示         
      .pipe(concat('demo.min.js'))  //合并文件以及文件输出后的名字         
      .pipe(uglify())  // 压缩js文件         
      .pipe(gulp.dest('./b/js'))  //处理完文件 输出的路径
})

3、html 压缩

gulp.task('html',function () {     
      var options ={          
            collapseWhitespace: true,//压缩HTML
            removeComments: true,//清除HTML注释          
            minifyJS: true,//压缩页面JS          
            minifyCSS: true//压缩页面CSS     
      }     
      gulp.src('./a/*.html')         
            .pipe(minifyHtml(options))        
           .pipe(gulp.dest('./b'))
})

Node中的通配符

通配符是一种匹配模式，允许你匹配到多个文件。不止是Node，很多平台都有，有点像正则表达式。

使用通配符，计算机检查文件名和路径进行匹配。

大部分时候，我们只需要用到下面4种匹配模式：

1、 *.scss：*号匹配当前目录任意文件，所以这里*.scss匹配当前目录下所有scss文件
2、 */.scss：匹配当前目录及其子目录下的所有scss文件。
3、!not-me.scss：！号移除匹配的文件，这里将移除not-me.scss
4、*.+(scss|sass)：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

更多参考：http://www.tuicool.com/articles/FJVNZf
恩~~就先这样吧。