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 监听就够了
就啰嗦到这里了 感谢各位大爷 来观看 大爷吃好喝好 记得常来啊~~~~
