Gulp及组件安装构建
Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。
Gulp安装
全局安装Gulpjs
局部安装Gulpjs
全局安装
1. 将安装包放在 /usr/local 下
2. 可以直接在命令行里使用
本地安装
1. 将安装包放在 ./node_modules 下(运行npm时所在的目录)
2. 可以通过 require() 来引入本地安装的包
选择Gulp组件
前端项目需要的功能:
1、图片(压缩图片支持jpg、png、gif)
2、样式 (支持sass 同时支持合并、压缩、重命名)
3、javascript (检查、合并、压缩、重命名)
4、html (压缩)
5、客户端同步刷新显示修改
6、构建项目前清除发布环境下的文件(保持发布环境的清洁)
通过gulp plugins,寻找对于的gulp组件
gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-livereload: 服务器控制客户端同步刷新(需配合chrome插件LiveReload及tiny-lr)
安装Gulp组件
安装组件项目目录,通过cd project 进入目录,执行下边的npm安装组件。
项目目录结构
project(项目名称)
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–dist 发布环境
|–css 样式文件(style.css style.min.css)
|–images 图片文件(压缩图片)
|–js js文件(main.js main.min.js)
|–index.html 静态文件(压缩html)
|–src 生产环境
|–sass sass文件
|–images 图片文件
|–js js文件
|–index.html 静态文件
|–.jshintrc jshint配置文件
|–gulpfile.js gulp任务文件
gulp基础语法
gulp通过gulpfile文件来完成相关任务,因此项目中必须包含gulpfile.js
gulp有五个方法:src、dest、task、run、watch
src和dest:指定源文件和处理后文件的路径
watch:用来监听文件的变化
task:指定任务
run:执行任务
编写gulp任务
* 组件安装
* npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
*/
// 引入 gulp及组件
var gulp = require('gulp'), //基础库
imagemin = require('gulp-imagemin'), //图片压缩
sass = require('gulp-ruby-sass'), //sass
minifycss = require('gulp-minify-css'), //css压缩
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //合并文件
clean = require('gulp-clean'), //清空文件夹
tinylr = require('tiny-lr'), //livereload
server = tinylr(),
port = 35729,
livereload = require('gulp-livereload'); //livereload
// HTML处理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist/';
gulp.src(htmlSrc)
.pipe(livereload(server))
.pipe(gulp.dest(htmlDst))
});
// 样式处理
gulp.task('css', function () {
var cssSrc = './src/scss/*.scss',
cssDst = './dist/css';
gulp.src(cssSrc)
.pipe(sass({ style: 'expanded'}))
.pipe(gulp.dest(cssDst))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest(cssDst));
});
// 图片处理
gulp.task('images', function(){
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(livereload(server))
.pipe(gulp.dest(imgDst));
})
// js处理
gulp.task('js', function () {
var jsSrc = './src/js/*.js',
jsDst ='./dist/js';
gulp.src(jsSrc)
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});
// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
.pipe(clean());
});
// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
gulp.start('html','css','images','js');
});
// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){
server.listen(port, function(err){
if (err) {
return console.log(err);
}
// 监听html
gulp.watch('./src/*.html', function(event){
gulp.run('html');
})
// 监听css
gulp.watch('./src/scss/*.scss', function(){
gulp.run('css');
});
// 监听images
gulp.watch('./src/images/**/*', function(){
gulp.run('images');
});
// 监听js
gulp.watch('./src/js/*.js', function(){
gulp.run('js');
});
});
});
LiveReload配置
1、安装Chrome LiveReload
2、通过npm安装http-server,快速建立http服务
3、通过cd找到发布环境目录dist
4、运行http-server,默认端口是8080
5、访问路径localhost:8080
6、再打开一个cmd,通过cd找到项目路径执行gulp,清空发布环境并初始化
7、执行监控 gulp
8、点击chrome上的LiveReload插件,空心变成实心即关联上,你可以修改css、js、html即时会显示到页面中。
Gulp及组件安装构建的更多相关文章
- 基于gulp 的前端自动化构建方案总结
一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...
- Gulp:新一代前端构建利器
1.什么是Gulp gulp.js 是一种基于流的,代码优于配置的新一代构建工具. Gulp 和 Grunt 类似.但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建. ...
- Gulp vs Grunt 前端构建工具对比
Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...
- 仿async/await(一)and Gulp:新一代前端构建利器
NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...
- gulp.js 的安装以及使用
首先:电脑需要安装 Node.js 一个大绿色的安装按钮,点击就可以. 但还是推荐,点击download选中一款适合电脑配置的版本. Node安装过程,就是下一步 and 下一步~~ 测试手否安装成功 ...
- gulp的使用安装
gulp安装:用cnpm的时候把npm换成cnpm就好了. npm install -g gulp(全局安装,安装一次就好) npm install --save-dev gulp(安装到项目目录下, ...
- Microsoft Visual Studio Web 创作组件安装失败的解决方法
在网上查一下说是Office2007的问题.我把Office2007卸载了还是不行. 然后用Windows Install Clean Up工具清理,还是不行. 郁闷了.然后在安装包中的下面路径下找到 ...
- Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用
Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用 hydra可以破解: http://www.thc.org/thc-hydra,可支持AFP, Cisco AAA, Cisco a ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
随机推荐
- 一步步学算法(算法分析)---6(Floyd算法)
Floyd算法 Floyd算法又称为弗洛伊德算法,插点法,是一种用于寻找给定的加权图中顶点间最短路径的算法.该算法名称以创始人之一.1978年图灵奖获得者.斯坦福大学计算机科学系教授罗伯特·弗洛伊德命 ...
- thinkphp框架的路径问题 - 总结
thinkphp框架的路径问题 - 总结 (2011-06-21 11:01:28) 转载▼ 标签: thinkphp 框架 路径 杂谈 分类: Php TP中有不少路径的便捷使用方法,比如模板中使用 ...
- SQLLoader8(加载的数据中有换行符处理方法)
SQLLDR加载的数据中有换行符处理方法1.创建测试表: CREATE TABLE MANAGER( MGRNO NUMBER, MNAME ), JOB ), REMARK ) ); 2.创建控制文 ...
- hdu1166 经典线段入门
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- 初识KMP
KMP简介 KMP是一种由Knuth(D.E.Knuth).Morris(J.H.Morris)和Pratt(V.R.Pratt)设计的字符串匹配算法.对目标串T[0:n-1]中查找与之匹配的模式串P ...
- Myeclipse中如何修改Tomcat的端口号
一,使用 Myeclipse 中自带的 tomcat 右键 configure 弹出窗口 在 port Number 中修改 端口号即可: 二,配置的 tomcat 如果用上述的方法,只能打开这样的窗 ...
- 火狐浏览器,hostadmin hosts文件访问权限不足
开始->附件->以管理员身份运行. cacls %windir%\system32\drivers\etc\hosts /E /G Users:W
- c# 配置连接 mysql
今天复习了下c#连接mysql 记录下来方便自己也方便别人! 使用vs2010连接mysql 数据库, 1.装连接驱动,使用Connector/Net 连接驱动!下载地址:http://dev.my ...
- 《javascript高级程序设计》笔记4.1.4:检测类型
javascript类型检测这节主要讲了typeof和instanceof操作符. 一.typeof操作符: 1.typeof在检测基本数据类型时十分方便,针对4种基本数据类型string.numbe ...
- python3.4 伪装成浏览器获取页面信息失败
最近学了下网络爬虫,打算从一个网站上提取点东西,自己练练手,刚开始还从这个网站上取了正确的html,后来百般尝试还是不能取正确的html,希望能得到大家的帮助~ 我刚开始的代码是: 1 url=&qu ...