gulp——用自动化构建工具增强你的工作流程
想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好、兴趣
简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1. gulp的用途:
-
代码压缩
-
CSS自动加前缀
-
LESS编译
-
地址版本追加
-
文件合并
-
文件修改自动刷新页面
-
更新编译本地依赖静态资源自动加缓存戳避免客户端浏览器缓存
看到这些作用,似乎gulp与grunt没什么区别
然鹅,对于这两款作用相同的前端自动化构建工具,为什么更多的人更倾向于gulp呢?
这就要从“性能”上来说了
就像功能相同的两款手机:Apple和Samsung
Apple的使用人数显然要高过Samsung,因为Apple较之Samsung更安全,使用起来更方便
那么,反观我们的gulp较之grunt这个款自动化构建工具:
Grunt专注于配置,而Gulp专注于代码(写法更易于使用者接受)
gulp的任务目标更明确,效率更快(gulp任务划分明确,当出现多个任务同步执行时,可以利用gulp中的时间监听来决定执行事件流。当然不管是gulp还是grunt都不建议一个task同时进行多个操作)
2. gulp的安装及使用:
gulp需要在Node.js的环境下运行,所以gulp的插件需要npm来运行,麻蛋,不止是它,现在前端越来越多的东西都建立在node的基础上了~伤不起了啊
使用Gulp需要先在项目下安装Gulp模块
初始化项目环境
npm init
进入项目,安装gulp
npm install gulp --save-dev
在根目录下创建gulp配置文件gulpfile.js(gulp所有的任务都是在这里配置的)
如果你已经坚持到了这里,那说明你离成功不远了
ex:复制压缩一个css文件
注:task是定义任务 src是需要打包的路径 dest是输出路径 pipe()是数据流的管道
同grunt一样,gulp也要有保存开发插件的依赖——packge.json
创建方式: 打开命令行进入开发的工作目录,输入 npm init 就会自动生成一个空的package.json文件
过程中,你会觉得和使用vue的路程相似,填一堆信息,大概就是这样的:
然鹅,这些都不重要,重要的是你要知道你生成packge.json的目的 嘿嘿嘿~
好了,有位大神已经总结了一些常用的插件,至于其他的视项目而定吧
gulp插件的安装:
npm install <插件> -D
注:-D 就是 --save-dev 是默认把该插件保存到本地的package.json的依赖中
注:--save
:将保存配置信息至package.json(package.json是nodejs项目配置文件)
-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等
如果我们换了电脑,可以直接把这个带有依赖的package.json拿过来直接执行 npm isntall 就会把所有依赖的插件全部下载下来,所以最好是在下载的时候添加 -D
3.摒除以上的脏乱差的解说,我们举个通俗易懂的栗子吧——压缩js
1.通过黑窗口cd到我们的项目
2. npm init 生成packge.json这个文件,目的就是存放gulp的插件依赖(如果你像我一样懒,可以在第一次生成之后直接保存,以后直接拿过去用,根据需求做相应的改动就行了)
1 { 2 "name": "gulp", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "babel-preset-es2015": "^6.18.0", 13 "del": "^2.2.2", 14 "event-stream": "^3.3.4", 15 "gulp": "^3.9.1", 16 "gulp-babel": "^6.1.2", 17 "gulp-concat": "^2.6.1", 18 "gulp-cssmin": "^0.2.0", 19 "gulp-htmlmin": "^4.0.0", 20 "gulp-imagemin": "^3.4.0", 21 "gulp-less": "^3.3.0", 22 "gulp-minify-css": "^1.2.4", 23 "gulp-minify-inline-scripts": "^0.0.6", 24 "gulp-obfuscate": "^0.2.9", 25 "gulp-rename": "^1.2.2", 26 "gulp-replace": "^0.5.4", 27 "gulp-sass": "^3.0.0", 28 "gulp-uglify": "^2.1.2", 29 "gulp-url-replace": "^1.0.2", 30 "imagemin-pngquant": "^5.0.0", 31 "webchen-ddky-append": "^0.1.8" 32 } 33 }
3. npm install <name> --sava-dev 安装你的插件(会自动生成node_modules文件,里面主要存放的就是你的插件啦)
注:如果你有配置好的packge.json文件,直接放到了项目里,那就不用一个一个安装插件啦,直接npm install就行
如果你觉得一个一个安装插件太麻烦,可以npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev的方式,一次安装多个
4. 在根目录下,新建一个gulpfile.js(gulp文档里有一个模板,大概就是那个样子的,当然,我也给你准备了一个哦)
1 // 获取 gulp 2 var gulp = require('gulp'); 3 var uglify = require('gulp-uglify'); 4 var rename = require('gulp-rename'); 5 6 // 压缩 js 文件 7 // 在命令行使用 gulp script 启动此任务 8 gulp.task('script', function() { 9 // 1. 找到文件 10 gulp.src('src/js/*.js') 11 //rename压缩后的文件名 12 .pipe(rename({suffix: '.min'})) 13 // 2. 压缩文件 14 .pipe(uglify({ mangle: false })) 15 // 3. 另存压缩后的文件 16 .pipe(gulp.dest('dist/js')) 17 }) 18 19 gulp.task('default', ['script']);
5.当packge.json和gulpfile.js准备好之后,你会发现,此时你的项目文件是这样的:
除了上述我们提到的json、js和node_modules,你会发现还多了一个packge-lock.json
不用担心,这是正常的,package-lock.json 是在 npm install 的时候生成的一份文件,主要目的就是用以记录当前状态下实际安装的各个npm package(插件)的具体来源和版本号,确保你每次安装的库包都与之前的一样
6.恭喜你,走到了这里,说明你离成功只有一步之遥啦 而这最后一步就是运行gulp来压缩你的js啦
gulp script 或者是直接执行 gulp
注:当执行gulp default或gulp将会调用default任务里的所有任务,如果想执行一个任务时,可以命令提示符执行gulp+任务名称,建议是一个一个任务执行
7.走到这里,可以小确幸一下啦
多出来的这个dist>js文件就是刚刚压缩完成的js啦
简单的把gulp的用法总结了一下,希望以后能用的到