Gulp前端构建Web前端之路让前端飞

前端开发之gulp插件gulp-end

2017-06-18  本文已影响53人  巩小白

这一节,我们说说gulp插件。
现在市面上应该有上千种插件,gulp官方提供的不多,其他都是私人写的,我们可以拿过来直接用,如果你自己感兴趣,也可以自己写一款gulp插件,并开源分享给我们大家。
今天我们讲的是在我们项目里边比较核心的几个。
--1--gulp-connect
--2--gulp-contact
--3--gulp-minify-css
--4--gulp-imagemin
1、gulp-connect
在做项目开发的时候,有时候也需要把项目放在本地服务器下去运行。
gulp-connect很容易创建一个本地服务器去运行项目。
下载:npm install gulp-connect --save-dev

下载gulp-connect插件 我们在node下引用第三方插件的时候,都需要require一下,这个也符合commonjs语法。
在使用之前引入gulp-connect文件,给他起名为connect 引入gulp-connect
gulp-connect示例 gulp-connect示例
然后在浏览器输入localhost:8080/,此时默认打开的便是index.html。
好了,我们现在把服务器搭建起来了,那么在修改代码时候,怎样才能够实时刷新呢?
1.修改的代码在哪里?src
2.服务器访问的是什么文件夹?dist
3.src里边修改,更新dist里边的文件,同时出发copeHTML这个任务
实时刷新
browser-sync可以在电脑手机平板多设备调试
browser-sync
合并文件concat
gulp-uglify压缩js 合并文件 合并并压缩文件
压缩css内容参数比较多,这里只简单介绍下操作流程,具体请移步https://github.com/jakubpawlowicz/clean-css 压缩css文件
上一篇下一篇

猜你喜欢

热点阅读