【原】gulp快速入门

今天刚入职了一家新公司，结果明天就要开始项目了。上级说要用gulp来打包代码，所以今晚花了一晚来看这个gulp，

可以说已经入门了。所以做一个小小的总结：

首先全局安装gulp

npm install gulp -g

　然后我在F:/盘新建一个gulpDemo路径，

　　进入到这里面,在本地再次安装一次gulp，我也不知道为什么本地还要安装。你就装吧，哈哈

不过，在安装之前，确保 gulpDemo 这个文件夹里有package.json 这个文件

这个文件如下：

/package.json

{

  "name": "xianyulaodi",

  "version": "1.0.0",

  "description": "this is a gulp",

  "main": "",

  "dependencies": {

    "del": "^2.2.0",

    "gulp": "^3.9.1",

  },

  "devDependencies": {},

  "scripts": {

    "test": "gulp"

  },

  "keywords": [

    "gulp"

  ],

  "author": "xianyulaodi",

  "license": " MIT"

}

在 gulpDemo 这个文件夹里再次安装gulp

C:\Users\>f:

F:\>cd gulpDemo npm install gulp --save-dev

gulpfile.js配置

在gulpDemo 这个根目录下新建一个 gulpfile.js

然后在cmd执行如下命令，安装一些插件：

C:\Users\>f:

F:\>cd gulpDemo npm install gulp-uglify gulp-minify-css gulp-concat gulp-rename --save

gulpfile.js 内容如下：

var gulp =require("gulp");//创建 gulp模块

var uglify=require("gulp-uglify");//创建js混淆压缩 模块

var minify_css =require("gulp-minify-css");　//创建 css混淆压缩模块

var gulp_concat = require('gulp-concat');  //创建 文件合并模块

官方的API如下

**官方API**

        gulp.task(name[, deps], fn)

        gulp.src(globs[, options])

        gulp.dest(path[, options])

        gulp.watch(glob [, opts], tagulpsks)

先不用管，只需要知道有这四个属性就行

在 gulpDemo 目录里新建一个 src目录，里面有css文件夹，放一个test.css.

此外，还需要新建dist目录，里面有css文件

如:

gulpDemo

./src/css/test.css

./dist/css

接着在 gulpfile.js补充下面的代码

 gulp.task('min-css',function(){  //1

        gulp.src('./src/css/*.css')  //2

        .pipe(gulp_concat("main.min.css"))//3

        .pipe(minify_css())//4.混淆即压缩

        .pipe(gulp.dest('./dist/css'));//5.输出路径

    });

在cmd里面执行 gulp min-css

在dis/css这个文件夹里，你就会发现有一个 mian.min.css, 这个就是 /src/css/test.css经过压缩之后的代码。

所以我们的用gulp打包测试成功

接下来逐一解释 1、2、3、4、5

1. gulp.task('min-css',function(){ }

第一个参数name是自定义你的任务名称，所以执行打包的命令是 gulp name, 比如我叫min-css,就gulp min-css 。我把min-css改为 xianyu,打包命令就为 gulp xianyu
第二个参数[deps]是一个数组，里面是你定义的其他任务的名称，这些任务会在本次定义的任务之前执行并完成。
第三个参数fn是本次任务的回调函数。

2.gulp.src('./src/css/*.css')

官方API gulp.src(globs[, options])

'./src/css/*.css'匹配同层路径下src目录下的css目录下的所有以.css结尾的文件

这个可以说是入口文件

3 .pipe(gulp_concat("main.min.css"))

pipe（）方法是正如字面意思理解的那样，把一个文件流输入，通过pipe管道输出，

所以打包之后的css名是 main.min.css

4 .pipe(minify_css())//混淆压缩js插件

什么意思呢，就是比如我的./src/css/有文件有多个文件，比如a.css,b.css,c.css,那么打包后所有的css会混淆在main.min.css中

5 .pipe(gulp.dest('./dist/css'));

就是我打包之后的css的输出路径；

到此为止，gulp快速入门就到此为止了

我们学会如何装gulp，如何安装gulp插件。如何写gulpfile.js配置文件

了解了gulp的3大APIgulp.src(); gulp.task(); gulp.dest()

推荐一篇博文，相当于是本文的升级版，

http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/