gulp入门教程之二 文件操作与gulp插件

webpack admin 暂无评论

9.基本任务

9.1 复制单个文件

1.png

9.2 复制多个文件

2.png

9.3 组合任务

3.png

9.4 监听任务

使用 gulp 的 watch 这个方法,我们可以去监视一些文件,当这些文件发生变化的时候,立即去执行一些指定的任务

4.png

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 使用插件步骤

  1. npm install xxx --save-dev 安装插件

  2. 在 gulpfile.js 顶部引入此插件

  3. 在创建任务的时候使用此插件

10.2 gulp-load-plugins

这个插件能自动帮你加载package.json文件里的gulp插件。 例如假设你的package.json文件里的依赖是这样的:

5.png

然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件

6.png

然后我们要使用gulp-concat和gulp-connect这两个插件的时候, 就可以使用$.concat和$.connect来代替了,也就是原始插件名去掉gulp-前缀,之后再转换为驼峰命名。

10.3 less

less插件可以把less文件编译成css

$    npm install gulp-less --save-dev

7.png

10.4 gulp-concat

这个插件可以把几个文件合并到一块

$    npm install gulp-concat --save-dev

8.png

10.5 gulp-uglify

合并后我们可以对JS文件进行压缩,最小化处理

$  npm install gulp-uglify --save-dev

9.png

10.6 gulp-rename

在把处理好的文件存放到指定的位置之前,我们可以先去重新命名一下它

$ npm install gulp-rename --save-dev

10.png

10.7 gulp-minify-css

压缩css

$    npm install gulp-minify-css --save-dev

11.png

10.8 gulp-minify-html

html文件压缩

$ npm install gulp-minify-html --save-dev

12.png

10.9 gulp-imagemin

如果要想在保证不改变图像质量的情况下,让图像文件的体积变得更小一点,我们可以使用gulp-imagemin

$ npm install gulp-imagemin --save-dev

13.png

10.10 gulp-connect

有些时候我们需要把文件放到本地服务器上去预览,gulp-connect可以帮我们创建一个本地服务器去运行我们的项目

    npm install gulp-connect --save-dev

14.png

10.11 自动刷新

我们希望当文件变化的时候浏览器可以自动刷新,这样我们就不需要文件修改后手动去刷新浏览器了

15.png

10.12 jshint

可以用此插件进行代码检查,注意必须同时安装jshint和gulp-jshint 全部选项

npm install jshint gulp-jshint  --save-dev

16.png

11 gulp.js 特点

  1. 使用gulp.js构建的是代码不是配置文件

  2. 使用node标准库编写脚本

  3. 插件非常简单,职责单一

  4. 任务都是最大的并发数执行

12 学习建议

  • 多了解插件库,利用最合适的插件。

  • 常用的插件,仔细阅读 文档以便更好使用。

  • 学习好自身的API

  • 尝试编写适合自己工作流程中和习惯的plugin


转载请注明: Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » gulp入门教程之二 文件操作与gulp插件

喜欢 ()or分享