【原】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/