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

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

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

前言

这几天和一个团队做项目用到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.会出来一个命令行对话输入前端js和css的压缩合并之gulp

依次填写即可得到你的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
前端js和css的压缩合并之gulp
现在应该很清除这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日发布

+

+

+

相关推荐