前端js和css的压缩合并之gulp

me：感觉这个还不错，简洁，符合ror的口味。

找一篇文，写的不错。粘过来保存一下，谁知道哪天文被删除了。

 

From：https://segmentfault.com/a/1190000003003847

前言

这几天和一个团队做项目用到gulp,这里写点自己的看法。
首先，来看这篇教程的肯定是听过gulp的，那么一定也了解过nodejs，知道前端自动化工具，可是平时用sublime写代码用的好好的，没觉得需要什么工具来加快开发流程。那么第一个问题一定是“我们为什么用gulp？”

我们为什么用gulp？

首先先问自己一个问题：平时用sass/less写css，用jade写/html代码，那么这些文件的的测试、检查、合并、压缩、格式化、部署，监听。应该怎么完成呢？就来压缩合并来讲，可以减少多个css，js文件请求，优化网页性能，这样的工作是否应该有一个很好的解决方案呢？---答案就是gulp
gulp与grunt谁好谁坏的争论一直存在，大家可以自行搜索，这里我想说，适合自己的就是最好的，我是前端菜鸟，所以一上手接触的就是gulp。

安装gulp

学习一门技术，最好的途径就是看官方文档。这里我贴出地址
gulp官方网址 gulp插件地址 gulp 官方API gulp中文API
1.通过npm包安装（前提是已经安装了nodejs环境 和 npm）

npm install gulp -g

这里稍微介绍一下命令的含义：因为npm安装插件的命令行格式为

 npm install <name> [-g] [--save-dev]

其中 ：node插件名称
-g：全局安装。将会安装在全局路径下，并且写入系统环境变量，最直观的感觉就是可以可以通过命令行在任何地方调用它；全局路径 输入npm config get prefix可以看到路径，我的ubuntu系统显示/usr/local/lib/node_modules/
非全局安装：将会安装在当前定位目录； 本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；因为node插件太多，不用一个package文件保存插件信息，之后维护和升级会比较麻烦
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

在全局安装完gulp后，运行gulp -v 可以查看gulp版本号

第一个gulp项目

1.先新建一个项目目录：mkdir gulp-file
2.进入这个目录： cd gulp-file
3.再次在本地安装gulp：npm install gulp --save
这样做的目的是为了让gulp开发升级更加灵活，具体的我也不太懂，stackoverflow上面有人问过这个问题“为什么我要在全局和本地安装两次我的gulp”
4.新建package.json配置文件：npm init
5.会出来一个命令行对话输入

依次填写即可得到你的package.json文件，ls一下可以查看。
6.接下来假设gulp-flie 项目开发中还有css，js等文件，我们可以通过配置gulpfile.js文件来进行管理

gulpfile.js配置

7.在根目录下创建配置文件：touch gulpfile.js
8.打开编辑:gedit gulpfile.js
9. 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');  //创建 文件合并模块

以上这5个都是node_modules/里的插件模块。‘
因为之前没有安装过这些插件，所以得用npm安装

10.安装相应的模块：npm install gulp-uglify gulp-minify-css gulp-concat gulp-rename --save
11.安装完成之后，可以打开package.json文件，看到相关插件的一些版本信息
12.插件的作用是为了让我们前端开发更加流畅和规范化。
13.这个时候，打开官方文档，发现官网说gulp有4个属性，即src，dest，watch，dask。

**官方API**

        gulp.task(name[, deps], fn)
        gulp.src(globs[, options])
        gulp.dest(path[, options])
        gulp.watch(glob [, opts], tagulpsks)

看不懂没关系，我们先快速上手着几个api再一个个分析接着在gulpfile.js中写入下列几行代码

 gulp.task('min-css',function(){  //1
        gulp.src('./src/css/*.css')  //2
        .pipe(gulp_concat("index.min.css"))//3 
        .pipe(minify_css())//4.混淆即压缩
        .pipe(gulp.dest('./dist/css'));//5.输出路径
    });

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

这个API用来创建任务，在命令行下可以输入$ gulp min-css来执行上面的任务。gulp.task(name[, deps], fn)，
第一个参数name是自定义你的任务名称，
第二个参数[deps]是一个数组，里面是你定义的其他任务的名称，这些任务会在本次定义的任务之前执行并完成。
第三个参数fn是本次任务的回调函数。
举个栗子：

gulp.task('task1',function(){
    console.log("task1 done");
});
gulp.task('task2',function(){
    console.log("task2 done");
});
gulp.task('task3',function(){
    console.log("task3 done");
});
gulp.task('build',['task1','task2','task3'],function(){
    console.log("build done");
});

下图是执行build任务的结果，用gulp build

现在应该很清除这3个参数的作用了吧

//pipe（），管道函数，及

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

这个API获得要处理的文件源路径 官方API gulp.src(globs[, options])

globs是一个匹配模式，如gulpfile.js中写的 gulp.src('./src/css/*.css')
'./src/css/*.css'匹配同层路径下src目录下的css目录下的所有以.css结尾的文件
更多的匹配模式可以参考官方文档。
globs类型：String 或者 Array。string则说明它匹配单一模式。array表示它可以传入数组多个匹配字段，如['./src/css/index.css','./src/css/pomelo.css']
[options]是可选的。主要是两个，options.base----匹配的根目录，options-read
举个栗子：哈哈，这个得等学会gulp.dest() 这个API后才能具体说明。

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

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

下一个处理程序可以把上一级输出的流文件当做输入

这样可以实现文件流的高效处理,我认为这种方法很像jquery的写法。能够进行链式调用处理。
那么毫无疑问，第三段的代码.pipe(gulp_concat("index.min.css"))//3 的意思就是把获取到匹配gulp.src()字段的文件通过pipe管道进入插件gulp_concat()的处理程序，并且合并后的文件名为index.min.css
这里插件gulp_concat是文件合并的插件，详细的使用方法请在gitbub或者npm网站中找到相关的api文档。

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

方法和第三步是一样的

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

官方API gulp.dest(path[, options])

第一个参数 path：String 或者 Function
string类型--------输出文件的目标路径（或目录）'./dist/css'
function--------将接收一个 vinyl 文件实例 作为参数（具体请看分析“Gulp思维——Gulp高级技巧”）
第二个参数options有两个属性options.cwd 和 options.mode
options.cwd 用于计算输出目录的，只有提供的输出目录是相对路径时此参数才有用。
options.mode 用于创建的输出目录指定权限。默认值为077

前面提到过。想使用gulp.src的一些属性参数得先学会gulp.dest().这是因为源的参数设定（即输入端）会影响输出端的。

gulp.dest()的作用是将 目的地址（gulp.dest()）的基础路径（base）替换成 源地址(gulp.src())的基础路径（base）输出

那么什么是基础路径base呢？
gulp.src('./src/css/*.css')中有第二个参数base，可以指定基础路径，如果不设置，则默认基础路径为 * 之前的路径。

base：'./src/css'

如果设置了 gulp.src('./src/css/*.css',{base：'./'})
则base------'./'
gulp.dest('./dist/css')传入的参数就是base路径

base:'./dist/css'

举个栗子来解释什么是替换

gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'))；

那么最后文件处理完成的最终路径是

./dist/css/*.css

如果是

gulp.src('./src/css/*.css',{base：'./'}).pipe().pipe(gulp.dest('./dist/css'))；

那么最后文件处理完成的最终路径是

./dist/css/src/css/*.css

综上所述：

快速入门gulp就算结束了。我们已经学会如何装gulp，如何安装gulp插件，如何写package.json文件。如何写gulpfile.js配置文件
了解了gulp的3大APIgulp.src();gulp.task();gulp.dest()
实现的功能：完成了对多个css文件的合并与压缩并且输入到目标文件夹下

最后再次献上gulp官方网站，想学习更多就得自己修炼了。 ^0^

• 2015年07月20日发布

 

 

+

+

+

）

（

（

（