写这篇文章的目的是为了以后的项目中懒得再去配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工作中的实战的更多相关文章

  1. 【gulp】工作中的实战

    写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...

  2. 测试工作中ADB命令实战

    作者:TT,<测试架构师>微信公众号作者 大家能点击进来,说明还是对ADB有所了解或听说过的,可能也会比较熟练的掌握了这些命令,下面描述如有不对的地方,欢迎指正和交流学习,请多指教! 一. ...

  3. [工作中的设计模式]适配器模式adapter

    一.模式解析 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 也就是说,如果已经写好了一个接口,但是又来了一种截然不同的接口,如 ...

  4. [工作中的设计模式]原型模式prototype

    一.模式解析 提起prototype,最近看多了js相关的内容,第一印象首先是js的原型 var Person=function(name){ this.name=name; } Person.pro ...

  5. 运维工作中sed常规操作命令梳理

    sed是一个流编辑器(stream editor),一个非交互式的行编辑器.它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间",接着用sed命令处理缓冲 ...

  6. UML在需求分析与系统设计中之实战讲解

    UML在需求分析与系统设计中之实战讲解(完整UML图形演示) 小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中 ...

  7. 【mysql】工作中mysql常用命令及语句

    1.查看mysql版本号 MySQL [release_test_oa]> select version(); +------------+ | version() | +----------- ...

  8. 工作中 sql 整理(一)

    这篇文章记录关于SQL的内容,有些凌乱,是工作中点滴的积累,只能按照时间顺序,逐次记录. 一.update 关联更新 1.需求 Table A   TableB A表中的主键和B表中的主键相关联,关联 ...

  9. 工作中遇到的oracle分页查询问题及多表查询相关

    在工作中,有时,我们会用到oracle分页查询.这时,就需要先了解oracle的rownum.rowmun是oracle的伪列,只能用符号(<.<=.!=),而不能用这些符号(>,& ...

随机推荐

  1. cannot open shared object file: No such file or directory解决方法

  2. Scrum冲刺阶段3

    成员今日完成的任务 人员 任务 何承华 美化主界面 陈宇 后端设计 丁培辉 美化主界面 温志铭 主页面的设计 杨宇潇 主页面的设计 张主强 服务器构建 成员遇到的问题 人员 问题 何承华 主页面美化意 ...

  3. Jmeter监控服务器-CPU,Memory,Disk,Network性能指标

    本文主要说一下如何通过JMeter插件来监控服务器CPU.内存.磁盘.网络等相关资源. 一.下载 首先进入网址https://jmeter-plugins.org/downloads/old/  下载 ...

  4. FTP模式简式:PORT/PASV/EPRT/EPSV

    简介 常见FTP有两种模式:PORT(主动模式).PASV(被动模式). 而EPRT/EPSV模式出现的原因是FTP仅仅提供了建立在IPv4上进行数据通信的能力,它基于网络地址是32位这一假设.但是, ...

  5. Promise注意点

    一. Promise API  概述 var p = new Promise( function(resolve,reject){ // resolve(..) 用于决议 / 完成这个 promise ...

  6. 数据结构与STL容器

    1.静态数组 静态数组就是大小固定不能扩展的数组,如C中普通数组.C++11中array. 2.动态数组 动态数组的空间大小在需要的时候可以进行再分配,其代表为vector.由于数组的特点,在位置0插 ...

  7. elasticsearch中 refresh 和flush区别(转)

    elasticsearch中有两个比较重要的操作:refresh 和 flush refresh操作 当我们向ES发送请求的时候,我们发现es貌似可以在我们发请求的同时进行搜索.而这个实时建索引并可以 ...

  8. idea与maven整合

    1.官网下载 apache-maven-3.3.3 2.解压安装后配置conf-settings文件 a. <localRepository>E:\JAVA\maven_cangku< ...

  9. Appium之xpath定位元素

    原文:http://www.cnblogs.com/cnkemi/p/9180525.html appium也是以webdriver为基的,对于元素的定位也基本一致,只是增加一些更适合移动平台的独特方 ...

  10. 《python语言程序设计》_第二章笔记

    #2.2_编写一个简单的程序 项目1: 设计:radius=20,求面积area? 程序: radius=20 #给变量radius复制area=radius*radius*3.14159 #编写ar ...