gulp前端工程化教程

gulp

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 任务名称

Task方法

用来定义一个任务，
语法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:执行回调函数；

// gulpfile var 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为咱们提供这样的方法：将文件转换成stream流；

语法，gulp.src(filePath,option)
filePath:文件的路径,若是多个不一样的文件，咱们有两种方法显示
    一种是数组形式['a.js','b.css'] 一种是glops表达式,['*.js'] 表示a.js , b.js , c.js可是必定不能有目录符号‘/’; option:通常默认 

.pipe，咱们能够经过管道方法来处理每一个阶段的流，这些管道依次排开，前一个管道的输出做为后一个管道的输入,对流执行，链式调用；

语法 .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']) 

gulp

只是一个工具的抽象，它把基本的功能抽取出来，例如，读取文件，写入文件，建立管道，监听文件，建立任务；
可是如何在管道中处理这些stream流，没有实现，由于操做stream太复杂了，es6变成js,将less变成css，文件打包，文件压缩等等，这些不是一两个方法就能解决；所以把这些业务逻辑抽取出来做为插件使用，任何人均可以开发插件，
好处：插件多样性，每一个人均可以有本身的一个插件，这样使得咱们gulp包很小，
问题：想使用一个功能，没有一个很好的指引，

插件如何使用

1. 安装插件包，npm install -g gulp-rename (修改文件名插件)，能够复制到本身目录下；
2. 在gulpfile.js中将该模块引入进来，经过require；
3. 而后经过管道方法pipe使用

例子：重命名

//将js中的index.js文件放到demo文件夹中，而且命名为app.js var 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']) 

js文件的压缩

gulp-uglify

1. 安装插件
2. 在gulpfile.js引入该模块
3. 在pipe方法中执行该方法

var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('uglifyJs',function(){ gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest('demo')) }) gulp.task('default',['uglifyJs']) 

css压缩

gulp-minify-css

var gulp = require('gulp'); var minifyCss = require('gulp-minify-css'); gulp.task('minifyCssNow',function(){ gulp.src('css/*.css') .pipe(minifyCss()) .pipe(gulp.dest('demo')) }) gulp.task('default',['minifyCssNow']) 

html文件压缩

gulp-minify-html

var gulp = require('gulp'); var minifyHtml = require('gulp-minify-html'); gulp.task('miniFy',function(){ gulp.src('./*.html') .pipe(minifyHtml()) .pipe(gulp.dest('demo')) }) 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.src('10/js/*.js') .pipe(uglify()) .pipe(gulp.dest('demo/js')) }) gulp.task('cssMinify',function(){ gulp.src('10/css/*css') .pipe(minifyCss()) .pipe(gulp.dest('demo/css')) }) gulp.task('htmlMinify',function(){ gulp.src('10/*.html') .pipe(minifyHtml()) .pipe(gulp.dest('demo/')) }) gulp.task('dealImage',function(){ gulp.src('10/img/**/*.*') .pipe(gulp.dest('demo/img')) }) gulp.task('dealData',function(){ gulp.src('10/data/*.json') .pipe(gulp.dest('demo/data')) }) gulp.task('default',['jsUglify','cssMinify','htmlMinify','dealImage','dealData']) 

文件打包

开发时咱们可能会有几十个文件，咱们上线时会打包成一个文件
gulp-concat实现文件打包，使用方式和uglify同样，只不过concat方法须要传递一个参数，这个参数表示打包后的文件名称；

//将js文件夹中的js文件打包 var gulp = require('gulp'); var concat = require('gulp-concat'); //获取js中的Js文件而且打包在一块儿 gulp.task('jsConcat',function(){ gulp.src('js/*.js') .pipe(concat('main.js')) .pipe(gulp.dest('demo')) }) gulp.task('default',['jsConcat']) 

js代码校验

gulp-jslint 实现对JS代码校验

图片压缩

gulp-imagemin

var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); gulp.task('dealImage',function(){ gulp.src('img/*.*') .pipe(imagemin()) .pipe(gulp.dest('demo')) }) gulp.task('default',['dealImage'] 

可见对Png格式的图片压缩效果最好