9.基本任务
9.1 复制单个文件
9.2 复制多个文件
9.3 组合任务
9.4 监听任务
使用 gulp 的 watch 这个方法,我们可以去监视一些文件,当这些文件发生变化的时候,立即去执行一些指定的任务
10. gulp插件
gulp提供了一些很实用的接口,但本身并不能做太多的事情 可以读取文件、写入文件以及监控文件等一少部分功能 其它实用的功能都是依靠插件来进行扩展的 这些插件可以实现比如
编译 Sass:gulp-sass
编译 Less:gulp-less
合并文件:gulp-concat
压缩js 文件:gulp-uglify
重命名js文件:gulp-rename
优化图像大小:gulp-imagemin
压缩css 文件:gulp-minify-css
创建本地服务器:gulp-connect
实时预览 gulp-connect
10.1 使用插件步骤
npm install xxx --save-dev 安装插件
在 gulpfile.js 顶部引入此插件
在创建任务的时候使用此插件
10.2 gulp-load-plugins
这个插件能自动帮你加载package.json文件里的gulp插件。 例如假设你的package.json文件里的依赖是这样的:
然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件
然后我们要使用gulp-concat和gulp-connect这两个插件的时候, 就可以使用$.concat和$.connect来代替了,也就是原始插件名去掉gulp-前缀,之后再转换为驼峰命名。
10.3 less
less插件可以把less文件编译成css
$ npm install gulp-less --save-dev
10.4 gulp-concat
这个插件可以把几个文件合并到一块
$ npm install gulp-concat --save-dev
10.5 gulp-uglify
合并后我们可以对JS文件进行压缩,最小化处理
$ npm install gulp-uglify --save-dev
10.6 gulp-rename
在把处理好的文件存放到指定的位置之前,我们可以先去重新命名一下它
$ npm install gulp-rename --save-dev
10.7 gulp-minify-css
压缩css
$ npm install gulp-minify-css --save-dev
10.8 gulp-minify-html
html文件压缩
$ npm install gulp-minify-html --save-dev
10.9 gulp-imagemin
如果要想在保证不改变图像质量的情况下,让图像文件的体积变得更小一点,我们可以使用gulp-imagemin
$ npm install gulp-imagemin --save-dev
10.10 gulp-connect
有些时候我们需要把文件放到本地服务器上去预览,gulp-connect可以帮我们创建一个本地服务器去运行我们的项目
npm install gulp-connect --save-dev
10.11 自动刷新
我们希望当文件变化的时候浏览器可以自动刷新,这样我们就不需要文件修改后手动去刷新浏览器了
10.12 jshint
可以用此插件进行代码检查,注意必须同时安装jshint和gulp-jshint 全部选项
npm install jshint gulp-jshint --save-dev
11 gulp.js 特点
使用gulp.js构建的是代码不是配置文件
使用node标准库编写脚本
插件非常简单,职责单一
任务都是最大的并发数执行
12 学习建议
多了解插件库,利用最合适的插件。
常用的插件,仔细阅读 文档以便更好使用。
学习好自身的API
尝试编写适合自己工作流程中和习惯的plugin
转载请注明: Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » gulp入门教程之二 文件操作与gulp插件