没有合适的资源?快使用搜索试试~ 我知道了~
Gulp安装及配合组件构建前端开发一体化.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 163 浏览量
2021-09-13
17:19:05
上传
评论
收藏 164KB PDF 举报
温馨提示
![preview](https://dl-preview.csdnimg.cn/22665723/0001-9d29343644dfca11e7cf0a6ccb281e7e_thumbnail.jpeg)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
试读
3页
...
资源推荐
资源详情
资源评论
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/release/download_crawler_static/22665723/bg1.jpg)
Gulp 安装及配合组件构建前端开发一体化
Gulp 安装及配合组件构建前端开发一体化 gulp 官网地址 gulp 依赖环境:nodejs 和 ruby
注意:nodejs 和 ruby 对应的版本
安装好 nodejs 和 ruby 开始安装 gulp
1. 全局安装 gulp:
npm install --global gulp
2. 作为项目的开发依赖(devDependencies)安装:
npm install --save-dev gulp
3. 安装前端开发需要使用的 gulp 插件
前端项目需要的功能:
1、图片(压缩图片支持 jpg、png、gif)
2、样式(支持 sass 同时支持合并、压缩、重命名)
3、javascript(检查、合并、压缩、重命名)
4、html (压缩) 5、客户端同步刷新显示修改
6、构建项目前清除发布环境下的文件(保持发布环境的清洁)
通过 gulp plugins,寻找对于的 gulp 组件 gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持 sassgulp-minify-css: 压缩 cssgulp-jshint: 检查 jsgulp-uglify: 压缩
jsgulp-concat: 合并文件 gulp-rename: 重命名文件 gulp-htmlmin: 压缩 htmlgulp-clean: 清空文
件夹 gulp-livereload: 服务器控制客户端同步刷新(需配合 chrome 插件 LiveReload 及 tiny-lr)
gulp-connect: 自动刷新浏览器 rimraf:清空文件夹 gulp-autoprefixer:自动填补 css3 前缀
gulp-cssnano:优化 css 的插件如空白转换、css 写法优化 gulp-css-spriter:图片雪碧图 gulp-cache:
图片压缩缓存 imagemin-pngquant:图片深度压缩 gulp-imagemin:图片压缩 gulp-htmlmin:
html 压缩...等等其他的 gulp 插件请关注 gulp 官网...
批量 gulp 插件安装命令如下:
npm install gulp-htmlmin gulp-util gulp-cache gulp-css-spriter gulp-sass
gulp-imageminimagemin-pngquant gulp-autoprefixer gulp-ruby-sass gulp-cssnano
gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload
tiny-lrrimraf gulp-connect --save-dev 在项目根目录下创建一个名为 gulpfile.js 的文件: //
引入 gulp 及组件 var gulp = require('gulp'), //基础库 htmlmin = require('gulp-htmlmin'),
//HTML 压缩 imagemin = require('gulp-imagemin'), //图片压缩 pngquant =
require('imagemin-pngquant'), //图片深度压缩 cache = require('gulp-cache'), //图片压缩缓
存 spriter = require('gulp-css-spriter'), //图片雪碧图 sass = require('gulp-sass'),
//sass minifycss = require('gulp-minify-css'), //css 压缩 cssnano =
require('gulp-cssnano'),//优化 css 的插件如空白转换、css 写法优化 autoprefixer =
require('gulp-autoprefixer'), //自动填补 css3 前缀 jshint = require('gulp-jshint'), //js 检
查 uglify = require('gulp-uglify'), //js 压缩 rename = require('gulp-rename'), //重命
名 concat = require('gulp-concat'), //合并文件 rimraf = require('rimraf'), //清空文件
夹 connect = require('gulp-connect'); //自动刷新浏览器 // HTML 处
理 gulp.task('html', function() { varhtmlSrc = 'src/*.html', htmlDst =
'assets/'; var options = { removeComments: false, //清除 HTML 注
释 collapseWhitespace: false, //压缩 HTML collapseBooleanAttributes: false, //
省略布尔属性的值<input checked="true"/> ==><input /> removeEmptyAttributes: true,
//删除所有空格作属性值<input id="" /> ==><input /> removeScriptTypeAttributes:
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/6d4a39ec593a4e2fbcf3d53e4855e565_cqn2bd2b.jpg!1)
苦茶子12138
- 粉丝: 1w+
- 资源: 6万+
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)