gulp基于node流的自动化构建工具

GULP

在我才接触gulp的时候 看他就是一个 通过压缩各种文件来提升用户体验的开发工具   那是因为  对他的理解并不深    他真正强大 之处 在于他的     管子  .pipe()  可以 链式调用 无数个  厉害的插件

　　流的概念  我还不太理解  待我再仔细学习  node.js 后再说  现在  就不在这里 误导别人了

下面详细的来说一说gulp关于压缩文件的插件

　　压缩各种 类型文件 的操作其实差不多 都是要先 引入 gulp包   再引入 对应要压缩文件类型的 npm包

那么在文件夹里gitbash 输入如下

$ npm init -y　//生成 package.json
$ npm i -g gulp　　//这样 就可以全局 使用 gulp 命令
$ npm i -D gulp　　//下载至 node_module  因为gulp只是开发的时候会用到，所以 -D （--save--dev）

　　

　　如果 安装成功可以  gulp -v   看下版本号   能看你就成功了     这个npm 不太好安装   你可以 使用淘宝镜像 来安装

　　安装淘宝镜像   安装成功之后  把 所有的npm操作 换成 cnpm   会比之前快很多的

npm install cnpm -g --registry=https://registry.npm.taobao.org 

　　package.json 里默认的入口 main是  gulpfile.js   我们就新建一个 gulpfile.js 文件 （你想改main也没人拦你）

　　　　下面来干正事

压缩js　　

　gulpfile.js

var gulp = require('gulp');　　//请求gulp
var uglify = require('gulp-uglify');　　//压缩js的方法ualify（丑笔？）

gulp.task('script',function(){
    gulp.src('./*.js')　　//读取文件
    .pipe(uglify())　　　　//压缩js文件（变丑吧少年！）
    .pipe(gulp.dest('./dist/js'))　　//导出到 dist 下的js 文件夹下
})

在当前目录下 新建 test.js 你随便写点代码  别出错就好

这时在gitbash中

$ npm i -D gulp-uglify   //安装需要的包
$ gulp script

就可以看见

　　新生成了一个 dist文件夹  里面的js  文件夹里面 也有一个 test.js   这个就是压缩后的js

　　使用命令行之后 经常会遇到  一类错误

　　

　　这类错误  很容易解决  就是  缺什么 module  下什么 module

　　npm i ***  即可      下面  所有require 引入的模块 都要 npm 安装的  下面 包类似的错误也是这么解决哦

　　

我们来分析一下  上面这个栗子的成分

1.引入 gulp

2.引入要压缩文件 需要的  包  （gulp-uglify）

3.gulp任务 （gulp.task）  可以有多个任务哦 就是同时压缩好几种类型的文件

　　　　注意：下面这三个 链式调用的

　　1）gulp.src()　　要从哪里找文件    ./  相对路径  ，  *.js  任何以.js 结尾的文件

　　2）pipe()　　管子  。干吗用的呢？ 我也不知道  我感觉就是固定的格式   他要管道给他就好

　　　　　　在这里面    的是  真正 发挥作用 的    uglify  他把文件压缩的

　　3）pipe()　管子不能停  。。。   (想进行更多的操作  可以 一直  .pipe下去)

　　　　　　在这里  gulp.dest()　　压缩完 的东西 放到哪里

我们再来压缩一个 css

gulpfile.js

var gulp = require('gulp');　　　　//这个请求过一次就不需要在请求了

var minifycss = require('gulp-minify-css');　　//新的变数
gulp.task('css',function(){
    gulp.src('./*.css')
    .pipe(minifycss())　　　　　　　　　　　　　　//这里变了一下
    .pipe(gulp.dest('./dist/css'))
})

在当前文件夹下 新建一个  css 文件   随便写点

这时我们 在gitbash 输入 gulp css   就可以在 dist 下的 css 里面生成  压缩后的文件

切！ 这玩应好简单   就是压缩一个就要敲一次命令行有点麻烦了

当然有简单的方法

　　　　watch  持续监听

　　　　default 　设置过之后 你只需要 在命令行敲4个字母   gulp 就行了

在上面的代码的几乎上   还是 gulpfile.js

gulp.task('auto', function() {
    gulp.watch('js/**/*.js', ['script']);　　//watch('src',['name'])
    gulp.watch('css/**/*.css',['css']);
})
gulp.task('default',['script','css', 'auto'])

　gulp.watch('src',['name'])　　监听的文件   ,     任务的名字  task

　gulp.default('default',['name'],['name'])　 default(默认的)    ,   任务的名字

 都是这个套路啊

No   大部分都是这样的   就是中间那个管道 里面懂东西需要 改一下      附上神表

压缩的文件类型	中间管的内容
js	gulp-uglify()
css	gulp-minify-css
图片	gulp-imagemin({progressive:true})
less/sass	gulp-less()/gulp-sass()

如果 你跟这 我这个小白打了打  而且  你很善于发现问题   你会发现  在压缩js 的时候 如果js文件里面有  es6的语法    会报错

　　其实 也好解决    在   压缩  js 的中间管之前  添加  一个 转化  es6 到 es5 的  包即可　　babel

　　

//压缩有ES6 的 js
gulp.task('script',function(){
    gulp.src('js/**/*.js')    //找到下面所有的  js
    .pipe(babel())    //处理es6
    .pipe(uglify())  //管道
    .pipe(gulp.dest('dist/js'));
})

再在当前目录下  新建一个   .bablrc  的文件   注意  前面有一个点

　　文件里面写上下面的代码即可

{
    "presets":["env"]
}

其他插件总结

模块名称	模块.pipe()	模块的作用
删除模块       del	.pipe(del)	删除已有内容
格式检查模块 gulp-jsgint	.pipe(gulp-jshint).pipe(gulp-jshint.repoter('default'))	检查代码格式错误 便于调试
文件合并模块 gulp-concat	.pipe(concat(newname.css))	把多个文件合并成一个文件
重命名模块　 gulp-rename	.pipe(gulp-rename(newname.js))	重命名文件
错误抑制模块 gulp-plumber	.pipe(gulp-plumber)	即使报错 gulp 仍然处于挂起状态

　　　　　还有 copy 模块  其实  就是  gulp.src  获取过来 然后    .pipe(gulp.dest())  导出去    就相当于 copy了

　　　　　　还有  gulp-livereload 据说是 实时更新   我按照 npm 网站上的教程打了一下   没成功

　　　　他说 他升级了 不再 自动监听了      需要  设置  livereload({start:true})　　 然而 他得 实例代码 并没有这么设置  我自己试了几下   就算了吧  感觉 用 watch 监听就够了

　　就啰嗦到这里了     感谢各位大爷  来观看   大爷吃好喝好  记得常来啊~~~~