【gulp】工作中的实战
写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的。
gulp相关插件的介绍
用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的用途
1、del 删除文件,用于清空文件
2、browser-sync 用于自动刷新浏览器,从此再也不用F5手动刷新了
3、gulp-htmlmin 用于压缩html
4、gulp-clean-css 压缩css
5、gulp-uglify 压缩js
6、gulp-replace 替换路径
7、gulp-base64 将小图背景图转为base64的形式,可以自己设置最大多少尺寸转为base64
8、gulp-imagemin 压缩图片大小,不过效果不明显,还需要自己再处理一下图片
其他想用的插件可以自己去找,基本可以项目的需要,不够就去加就行
项目实战
1、由于项目中静态资源需要替换成公司的cdn,而且公司中的项目已经升级为https,所以这里弄了一个配置文件
config.js:
var projeact = 'awardSong'; //项目名 var terminal ='mobile'; //具体哪个端(pc、mobile..) var commit = 'E:/work'; //测试环境 module.exports = {
//CDN,一共有四个,到时候记得补上
cdn : ['xxx']
}
2、平时我是用sass来进行编码的,所以弄了一个sass目录,css里面的文件不用写。执行编译的时候会自动将sass编译到css文件中。
3、开发环境,执行gulp default 即可,然后在浏览器中选择你在编译的html,每次执行编译的时候,只要编辑器保存了代码,浏览器会做相应的改变。无需刷新。
4、如果要打包到生产环境,也就是发布到线上,可以执行 gulp release ,这样的话所有的静态文件就会打包到dist的目录下,而且所以的文件都是经过压缩的。当然,输出路径也是可以自己替换的
目录结构:
projecdName
+src
-css
-html
-images
-js
-sass
-config.js
-gulpfile.js
-package.json
package.json文件内容如下:
{
"name": "",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.2",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-base64": "^0.1.3",
"gulp-clean-css": "^2.0.13",
"gulp-htmlmin": "^3.0.0",
"gulp-sass": "^2.3.2",
"gulp-uglify": "~0.3.1",
"gulp-imagemin": "^2.2.1",
"gulp-replace": "^0.5.4"
}
}
gulpfile.js内容如下
/*
* @gulp:自动化任务
*/
var gulp = require('gulp');
var rm = require('del'); //删除文件
var browserSync = require('browser-sync');
var reload = browserSync.reload; //自动刷新,从此不用F5
var htmlmin = require('gulp-htmlmin'); //压缩html
var miniCSS = require('gulp-clean-css'); //压缩css
var miniJS = require('gulp-uglify'); //压缩js
var sass = require('gulp-sass'); //编译sass
var run_os_cmd = require('child_process').exec;
var replace = require('gulp-replace');
var cssBase64 = require('gulp-base64'); //将小图背景图转为base64的形式
var imagemin = require('gulp-imagemin'); /*清除产出目录*/
gulp.task('clear-dir', function() {
rm.sync(['dist/**']);
rm.sync(['staticPub/**']);
}) //引入配置文件
var config = require('./config.js');
var cdn=config.cdn[0]; /*
* html压缩
* 干掉http:和https:协议名
* 替换掉路径
*/
gulp.task('mini-html', function() {
return gulp.src('src/html/**.html')
.pipe(replace('http://', '//'))
.pipe(replace('https://', '//'))
.pipe(replace(/\.\.\/(images\/\S+\.(png|gif|jpg|webp))/g, function(all,str) {
return (cdn+str);
}))
.pipe(replace(/\.\.\/(css\/\S+\.(css|less|scss))/g,function(all,str){
return (cdn+str);
}))
.pipe(replace(/\.\.\/(js\/\S+\.(js))/g,function(all,str){
return (cdn+str);
}))
.pipe(htmlmin({
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
}))
.pipe(gulp.dest('dist/html/'))
}) /*图片产出*/
gulp.task('images', function() {
return gulp.src('src/images/*')
// 压缩图片
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/images/'))
}) /*sass开发*/
gulp.task('sass_dev', function() {
return gulp.src('src/sass/**.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/css/'))
.pipe(reload({stream:true}))
}) /*css压缩*/
gulp.task('mini-css', ['sass_dev'], function() {
return gulp.src('src/css/**.css')
.pipe(cssBase64({
maxImageSize: 8*1024 //小于8k的图转为base64
}))
.pipe(replace(/\.\.\/(images\/\S+\.(png|gif|jpg|webp))/g, function(all,str) {
return (cdn+str);
}))
.pipe(miniCSS({compatibility: 'ie6'}))
.pipe(gulp.dest('dist/css/'))
}) /*
* js压缩
* 干掉http:和https:协议名
*/
gulp.task('mini-js', function() {
return gulp.src('src/js/**')
.pipe(replace('http://', '//'))
.pipe(replace('https://', '//'))
.pipe(miniJS())
.pipe(gulp.dest('dist/js/'))
}) /*自动刷新*/
gulp.task('server', function() {
browserSync({
ui:false,
server: {
baseDir: 'src',
directory: true
},
notify: false,
ghostMode:false,
port: 8080,
open: "external"
}, function(err, arg) {
console.log('无需再按F5刷新啦!!');
})
}) /*开发环境*/
gulp.task('default', [
'sass_dev',
'server'
], function() {
gulp.watch('src/html/*.html', reload);
gulp.watch('src/js/**',reload);
gulp.watch('src/sass/*.scss',['sass_dev']);
}) /*生产环境*/
gulp.task('release', [
'clear-dir',
'mini-html',
'mini-css',
'mini-js',
'images'
], function() {
/*
* 二次产出,可以做其他操作
*/ })
项目的实际操作我发布到github了,有兴趣的可以搞一搞:https://github.com/xianyulaodi/gulpUsage
备注:代码比较简单,有一定gulp基础的都可以看的懂。主要是为了以后方便,直接拿来用即可,无需再去配置啊什么鬼。
【gulp】工作中的实战的更多相关文章
- 【原】gulp工作中的实战
写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...
- 测试工作中ADB命令实战
作者:TT,<测试架构师>微信公众号作者 大家能点击进来,说明还是对ADB有所了解或听说过的,可能也会比较熟练的掌握了这些命令,下面描述如有不对的地方,欢迎指正和交流学习,请多指教! 一. ...
- UML在需求分析与系统设计中之实战讲解
UML在需求分析与系统设计中之实战讲解(完整UML图形演示) 小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中 ...
- 工作中遇到的99%SQL优化,这里都能给你解决方案
前几篇文章介绍了mysql的底层数据结构和mysql优化的神器explain.后台有些朋友说小强只介绍概念,平时使用还是一脸懵,强烈要求小强来一篇实战sql优化,经过周末两天的整理和总结,sql优化实 ...
- git工作中最常用的用法教程,不走命令行
·1.1 git的概述 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Lin ...
- 随机记录工作中常见的sql用法错误(一)
没事开始写博客,留下以前工作中常用的笔记,内容不全或者需要补充的可以留言,我只写我常用的. 网上很多类似动软生成器的小工具,这类工具虽然在表关系复杂的时候没什么软用,但是在一些简单的表结构关系还是很方 ...
- 工作中常用的js、jquery自定义扩展函数代码片段
仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...
- 工作中那些提高你效率的神器(第二篇)_Listary
引言 无论是工作还是科研,我们都希望工作既快又好,然而大多数时候却迷失在繁杂的重复劳动中,久久无法摆脱繁杂的事情. 你是不是曾有这样一种想法:如果我有哆啦A梦的口袋,只要拿出神奇道具就可解当下棘手的问 ...
- 工作中那些提高你效率的神器(第一篇)_Everything
引言 无论是工作还是科研,我们都希望工作既快又好,然而大多数时候却迷失在繁杂的重复劳动中,久久无法摆脱繁杂的事情. 你是不是曾有这样一种想法:如果我有哆啦A梦的口袋,只要拿出神奇道具就可解当下棘手的问 ...
随机推荐
- java中IO流异常处理
import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
- reborn to freelancer
I want to be a freelancer, so I come back to record all my efforts. I hope this will be a new start ...
- PL/SQL配置Oracle数据库路径
打开PL/SQL-Tools->Preferences-Orcacle->Connecttion 找到配置路径,打开-product\instantclient_11_2\NETWORK\ ...
- Web.xml配置详解
(转自:http://www.cnblogs.com/chinafine/archive/2010/09/02/1815980.html) 1 定义头和根元素 部署描述符文件就像所有XML文件一样,必 ...
- 常用算法——排序(二)
简单选择排序法 选择排序(Selection Sort)的基本思想:对n个记录进行扫描,选择最小的记录,将其输出,接着在剩下的n-1个记录中扫描,选择最小的记录将其输出,--不断重复这个过程,直到只剩 ...
- 编程语言吉祥物之Duke
在看到这个可爱的小家伙前,我一直以为那个咖啡杯子是Java的吉祥物.直到拿到<Java性能优化权威指南>这本书,才知道有这个小东西Duke.这位可爱的Duke是由Joe Palrang在1 ...
- MySQL 用户登录密码和远程登录权限问题
1.mysql数据库,忘记root用户登录密码. 解决如下: a.重置密码 #/etc/init.d/mysqld stop #mysqld_safe --user=mysql --skip-gran ...
- SQL操作符
Oracle中的操作符算术操作符:无论是在sqlserver,或者是java中,每种语言它都有算术操作符,大同小异. Oracle中算术操作符(+)(-)(*)(/) 值得注意的是:/ 在oracle ...
- ELK日志系统:Filebeat使用及Kibana如何设置登录认证
根据elastic上的说法: Filebeat is a lightweight, open source shipper for log file data. As the next-generat ...
- [LeetCode] Course Schedule 课程清单
There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...