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)
一、安装
node先装好:
npm install -g gulp 全局安装
npm install gulp --save-dev
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
最常用的文件结构:
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及组件
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 = ,
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服务
npm install http-server -g
3、通过cd找到发布环境目录dist 4、运行http-server,默认端口是8080 5、访问路径localhost:8080 6、再打开一个cmd,通过cd找到项目路径执行gulp,清空发布环境并初始化 7、执行监控 gulp 8、点击chrome上的LiveReload插件,空心变成实心即关联上,你可以修改css、js、html即时会显示到页面中。
gulp 建立一个简单的自动化的更多相关文章
- idea破解版安装、配置jdk以及建立一个简单的maven工程
idea破解版安装.配置jdk,配置jdk环境变量以及建立一个简单的maven工程 一.idea破解版以及配置文件下载 下载网址:https://pan.baidu.com/s/1yojA51X1RU ...
- 通过myclipse建立一个简单的Hibernate项目(PS:在单元测试中实现数据的向表的插入)
Hibernate的主要功能及用法: Ⅰ.Hibernate封装了JDBC,使Java程序员能够以面向对象的思想对数据库进行操作 Ⅱ.Hibernate可以应用于EJB的J2EE架构,完成数据的持久化 ...
- Django 学习笔记之六 建立一个简单的博客应用程序
最近在学习django时建立了一个简单的博客应用程序,现在把简单的步骤说一下.本人的用的版本是python 2.7.3和django 1.10.3,Windows10系统 1.首先通过命令建立项目和a ...
- Hyperledger Fabric 建立一个简单网络
Building you first network 网络结构: 2个Orgnizations(每个Org包含2个peer节点)+1个solo ordering service 打开fabric-sa ...
- django 建立一个简单的应用
本人的用的版本是python 2.7.3和django 1.10.5,Windows10系统 1.首先通过命令建立项目和app 找到django的安装路径,我的路径是:C:\Python27\Lib\ ...
- 学习用node.js建立一个简单的web服务器
一.建立简单的Web服务器涉及到Node.js的一些基本知识点: 1.请求模块 在Node.js中,系统提供了许多有用的模块(当然你也可以用JavaScript编写自己的模块,以后的章节我们将详细讲解 ...
- SmartSql使用教程(1)——初探,建立一个简单的CURD接口服务
一.引言 最近SmartSql被正式引入到了NCC,借着这个契机写一个使用教程系列 二.SmartSql简介[摘自官方文档] 1. SmartSql是什么? SmartSql = MyBatis + ...
- 【Java编程】建立一个简单的JDBC连接-Drivers, Connection, Statement and PreparedStatement
本blog提供了一个简单的通过JDBC驱动建立JDBC连接例程.并分别通过Statement和PreparedStatement实现对数据库的查询. 在下一篇blog中将重点比較Statement与P ...
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
随机推荐
- map容器
map容器一般用于对字符串进行编号,主要用于建图方面,例如把城市名按数字进行编号 #include"stdio.h" #include"string.h" #i ...
- fzu 2188 过河I
http://acm.fzu.edu.cn/problem.php?pid=2188 过河I Time Limit:3000MS Memory Limit:32768KB 64bit ...
- 面向切面编程AOP:基于注解的配置
Aop编程就是面向编程的羝是切面,而切面是模块化横切关注点. -切面:横切关注点,被模块化的特殊对象. -通知:切面必须要完成的工作 -目标:被通知的对象 -代理:向目标对象应用通知之后创建的对象. ...
- 复习课程jdbc:使用配置文件properties进行连接数据库,数据库存取图片,批处理,时间戳,事物回滚等等
使用配置文件properties进行连接数据库 首先创建一个file自定义文件名,但是后缀名必须改为.properties(不分大小写):如config.properties: 然后双击config. ...
- 比较二个文件的最后修改时间FileListener
import java.io.File; import java.text.SimpleDateFormat; import java.util.Timer; import java.util.Tim ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON Cast 使用方式
zw版[转发·台湾nvp系列Delphi例程]HALCON Cast 使用方式 procedure TForm1.Button1Click(Sender: TObject);var img, img1 ...
- 【php】目录、路径和文件 操作
目录操作 解析路径: basename() - 返回路径的文件名部分 获取目录部分: dirname() - 返回路径的目录部分 路径信息: pathinfo() - 返回数组(目录名,基本名,扩展名 ...
- XMl的解析
MainActivitypackage com.example.secondweek_test2; import java.io.BufferedInputStream; import java.io ...
- mysql笔记02 创建高性能的索引
创建高性能的索引 1. 索引(在MySQL中也叫做"键(key)")是存储引擎用于快速找到记录的一种数据结构. 2. 索引可以包含一个或多个列的值.如果索引包含多个列,那么列的顺序 ...
- iOS OC与swift相互调用
小哥("我"的自称)个人混编的时候喜欢先创建OC项目,然后在项目中创建swift类.这样有个好处就是桥文件可以自动创建的同事路径不需要我手动去写了,另外还有个目的就是现在小哥自我感 ...