本文共 6900 字,大约阅读时间需要 23 分钟。
npm install -g gulp-concat 文件打包
npm install -g gulp-rename 文件重命名
npm install -g gulp-imagemin 图片压缩
npm install -g gulp-jslint js代码校验 慎用
npm install -g gulp-minify-css css压缩
npm install -g gulp-minify-html html压缩
npm install -g gulp-uglify js压缩
它是一个前端工程化工具,用来实现代码部署,css,javascript,html等代码的压缩,es6,less,styls等代码的编译,图片优化等;
它的实现:是基于UXIx中管道概念,nodejs中有个叫stream流,前一个操作的输出作为后一个操作的输入;
压缩CSS文件,第一个过程是获取文件,将这个文件转化成一个stream流,第二个过程将文件内容进行压缩,这个文件内容就是通过一个操作流入过来;第三个过程就是将文件写入一个文件中,可以是一个新的文件,也可以是当前文件;
Stream流:nodejs中读取文件,得到结果是一个流,这种流中包含文件的信息,包括文件名称、内容、编码、路径等等都在流中;
是为了写入或者更改来实现,使我们操作文件实现阶段化,
gulp的优势:
1. api简单:src,dest,task,pipe;2. 插件资源丰富,社区庞大,开发插件也很简单;
npm install gulp -g
查看是否安装成功:
gulp -v
配置package.json:
npm init
安装gulp:
npm install gulp --save-dev
安装gulp插件:
npm install gulp-less --save-dev
新建入口文件:
gulpfile.js, 这个文件很重要,每个项目都要有这个文件,这个是当执行gulp会自动执行该文件,该文件中我们可以书写gulp语句,基于js实现,与js语法一样的;
运行gulp:
gulp 任务名称
用来定义一个任务,语法gulp.task(name[,deps],fn)name:表示任务的名称deps:表示任务的依赖任务,可选参数;fn:任务的回调函数
运行gulp中task用run方法 :
语法: gulp.run(taskname);
taskname:表示任务的名称;
在最新的gulp版本中,run方法不建议使用,我们可以通过默认任务来实现
语法:gulp.task('default',deps,fn)
注意默认任务的名称就是default,不能写其他的名字,如果写其他的名字就会被当做普通任务来执行;
deps:依赖的任务集合;
fn:执行回调函数;
// gulpfilevar gulp = require('gulp');gulp.task('demo',function(){ console.log('demo task')})gulp.task('default',['demo'],function(){ console.log('default task')})
cmd输出
D:\MyPro\GULP\03default>gulp[00:15:05] Using gulpfile D:\MyPro\GULP\03default\gulpfile.js[00:15:05] Starting 'demo'...demo task[00:15:05] Finished 'demo' after 267 μs[00:15:05] Starting 'default'...default task[00:15:05] Finished 'default' after 101 μs
依赖的任务要先于当前任务执行;
μs:微秒;
在一个项目中,我们要批量的处理文件,
语法,gulp.src(filePath,option)filePath:文件的路径,如果多个不同的文件,我们有两种方法显示 一种是数组形式['a.js','b.css'] 一种是glops表达式,['*.js'] 表示a.js , b.js , c.js但是一定不能有目录符号‘/’;option:一般默认
语法 .pipe(fn)fn:通常表示处理方法;比如我们将一个文件放到另外一个目录下: gulp.pipe(gulp.dest(path)); gulp.dest方法表示将文件写入某个目录: 语法,gulp.dest(path) path:路径,目录路径
//读取js中的index.js文件//将index.js文件放到dest目录下//引入gulp模块var gulp = require('gulp');//定义一个读写index.js的任务gulp.task('dealIndex',function(){ //读取Index文件 gulp.src('js/index.js') //通过管道操作这个流 //将文件内容放到dest文件夹内 .pipe(gulp.dest('dest'))})//启动默认任务来执行dealIndex任务gulp.task('default',['dealIndex'])
cmd:
D:\MyPro\GULP\04读写>gulp[00:57:47] Using gulpfile D:\MyPro\GULP\04读写\gulpfile.js[00:57:47] Starting 'dealIndex'...[00:57:47] Finished 'dealIndex' after 15 ms[00:57:47] Starting 'default'...[00:57:47] Finished 'default' after 30 μs
我们在开发中想边开发边发布,gulp提供了一个方法叫watch来监视文件变化,来实现实时发布;
文件在写入、修改、删除时发生一个操作就是保存文件;
watch方法的语法
第一种: gulp.watch(globs,fn);
globs: 表示文件的路径
* 代表任意字符,除了目录符号/和拓展名.js .css .html等,可以: *.js a.js abc.js ** 代表任意字符,可以包括目录符号哦,但是不能包括拓展名.js .css等,可以:**/a.js 混合使用:**/*.js 包含所有的js文件 lib/**/*.js lib文件夹下面的所有js文件 fn:有个参数表示文件对象,有两个属性: type:操作的类型,changed,deleted,added path:操作的文件,D:\\MyPro\\GULP\\05文件监听\\js\\index.js第二种:gulp.watch(globs,deps); golbs:表示文件的路径 deps:表示任务task集合
案例一:
我们监听js文件下文件到demo的输出
// 监听Index.js的变化,发布到demo文件夹下var gulp = require('gulp');gulp.task('default')gulp.watch('js/*.js',function(e){ console.log(e) //将js下面的js文件放入demo文件夹下 gulp.src('js/*.js') .pipe(gulp.dest('demo'))})
cmd输出,下面的对象是console.log(e)
D:\MyPro\GULP\05文件监听>gulp[01:32:54] Using gulpfile D:\MyPro\GULP\05文件监听\gulpfile.js[01:32:54] Starting 'default'...[01:32:54] Finished 'default' after 158 μs{ type: 'changed', path: 'D:\\MyPro\\GULP\\05文件监听\\js\\index.js' }{ type: 'deleted', path: 'D:\\MyPro\\GULP\\05文件监听\\js\\demo.js' }{ type: 'changed', path: 'D:\\MyPro\\GULP\\05文件监听\\js\\index.js' }{ type: 'added', path: 'D:\\MyPro\\GULP\\05文件监听\\js\\demo.js' }{ type: 'changed', path: 'D:\\MyPro\\GULP\\05文件监听\\js\\demo.js' }
案例二
var gulp = require('gulp');gulp.task('demo',function(){ console.log('demo task')})gulp.task('dealJs',function(){ gulp.src('js/*.js') .pipe(gulp.dest('demo'))})gulp.task('default');gulp.watch('js/*.js',['dealJs','demo'])
只是一个工具的抽象,它把基本的功能抽取出来,例如,读取文件,写入文件,创建管道,监听文件,创建任务;
但是如何在管道中处理这些stream流,没有实现,因为操作stream太复杂了,es6变成js,将less变成css,文件打包,文件压缩等等,这些不是一两个方法就能解决;因此把这些业务逻辑抽取出来作为插件使用,任何人都可以开发插件,
好处:插件多样性,每个人都可以有自己的一个插件,这样使得我们gulp包很小,
问题:想使用一个功能,没有一个很好的指引,
//将js中的index.js文件放到demo文件夹中,并且命名为app.jsvar gulp = require('gulp');var rename = require('gulp-rename');gulp.task('renameJs',function(){ gulp.src('js/index.js') .pipe(rename('app.js')) .pipe(gulp.dest('demo'))})gulp.task('default',['renameJs'])
gulp-uglify
gulp.task('uglifyJs',function(){
gulp.task('default',['uglifyJs'])
###css压缩gulp-minify-css
var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');
gulp.task('minifyCssNow',function(){
gulp.task('default',['minifyCssNow'])
###html文件压缩gulp-minify-html
var gulp = require('gulp');
var minifyHtml = require('gulp-minify-html');
gulp.task('miniFy',function(){
gulp.task('default',['miniFy'])
###Vue项目实战1. 将html压缩2. 将css压缩3. 将js压缩
//我们要压缩css js html 依赖三个插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
var minifyHtml = require('gulp-minify-html');
//对三类文件压缩并放到压缩文件夹下
gulp.task('jsUglify',function(){
gulp.task('cssMinify',function(){
})
gulp.task('htmlMinify',function(){
gulp.task('dealImage',function(){
gulp.task('dealData',function(){
###文件打包开发时我们可能会有几十个文件,我们上线时会打包成一个文件gulp-concat实现文件打包,使用方式和uglify一样,只不过concat方法需要传递一个参数,这个参数表示打包后的文件名称;
//将js文件夹中的js文件打包
var gulp = require('gulp');
var concat = require('gulp-concat');
//获取js中的Js文件并且打包在一起
gulp.task('jsConcat',function(){
gulp.task('default',['jsConcat'])
###js代码校验gulp-jslint 实现对JS代码校验###图片压缩gulp-imagemin
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('dealImage',function(){
gulp.task('default',['dealImage']
```
可见对Png格式的图片压缩效果最好
转载地址:http://emhni.baihongyu.com/