基于gulp的前端自动化开发构建新
关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题。问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记。每次更新标记更新。
上篇文章想通过开发同时实现标记的实时更新,后来借鉴了别人的实现,原来的确是应该将这个过程分为开发和生产两个环境的,于是茅塞顿开。于是有了本文。
代码
package.json文件
{
"name": "gulpf",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.23.6",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-base64": "^0.1.3",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^3.9.3",
"gulp-htmlmin": "^4.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-plumber": "^1.2.0",
"gulp-rev": "^8.1.1",
"gulp-rev-collector": "^1.3.1",
"gulp-sass": "^4.0.1",
"gulp-spriter": "^1.1.5",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"run-sequence": "^2.2.1"
}
}
gulpfile.js下的代码
var gulp = require('gulp'),
clean = require("gulp-clean"),
htmlmin = require('gulp-htmlmin'),
rev = require('gulp-rev'), //添加时间戳
revCollector = require('gulp-rev-collector'), //时间戳添加后再html 里面替换原有的文件
sass = require('gulp-sass'),
base64 = require('gulp-base64'),
imageMin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
clean_css = require('gulp-clean-css'),
clean = require('gulp-clean'), //清除原来文件
babel = require("gulp-babel"),
browserSync = require('browser-sync').create(),
plumber = require('gulp-plumber'),
runSequence = require('run-sequence'),
autoprefixer = require('gulp-autoprefixer');
//编译sass
gulp.task('scss', function() {
gulp.src('src/scss/*.scss') .pipe(plumber({
errHandler: e => {
gutil.log(e); // 抛出异常
}
}))
.pipe(sass())
.pipe(base64({
extensions: ['svg', 'png', 'jpg', 'jpeg'],
maxImageSize: * , // bytes
debug: true
}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('src/css/'))
}); //清除css文件
gulp.task("cleancss", function() {
gulp.src("src/css/", { read: false })
.pipe(clean())
}) //开发环境
gulp.task('dev', ['cleancss','scss'], function(done) { browserSync.init({
//指定服务器启动根目录
server: "./src"
});
//监听sass编译,修改了才删除
gulp.watch("src/scss/*.scss", ['scss']); //监听任何文件变化,实时刷新页面
gulp.watch(["src/*.html", "src/imgs/*","src/css/*.css", "src/js/*.js"]).on('change', browserSync.reload);
}); //构建生产环境
//清除图片文件
gulp.task("cleanimgs", function() {
gulp.src("dist/imgs/", { read: false })
.pipe(clean())
})
//清除html文件
gulp.task("cleanhtml", function() {
gulp.src("dist/html/*.html", { read: false })
.pipe(clean())
})
//清除js文件
gulp.task("cleanjs", function() {
gulp.src("dist/js/*.js", { read: false })
.pipe(clean())
})
//清除css文件
gulp.task("cleandistcss", function() {
gulp.src("dist/css/*.css", { read: false })
.pipe(clean())
})
//拷贝压缩imgs
gulp.task("imgs", function() {
gulp.src('src/imgs/*')
.pipe(imageMin({ progressive: true }))
.pipe(plumber({
errHandler: e => {
gutil.log(e); // 抛出异常
}
}))
.pipe(gulp.dest('dist/imgs/'))
})
//拷贝压缩html
gulp.task("html", function() {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
gulp.src('src/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/'));
})
//转译es6
gulp.task("es6", function() {
gulp.src('src/js/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('dist/js/'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/js'))
})
//给css文件后添加时间戳
gulp.task('revcss', function() {
gulp.src('src/css/*.css')
.pipe(rev())
.pipe(gulp.dest('./dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/css'))
}); //给js文件后添加时间戳
gulp.task('rev', function() { gulp.src(['./dist/rev/*/*.json', './src/*.html'])
//- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector())
//- 执行文件内js名的替换
.pipe(gulp.dest('./dist/'));
//- 替换后的文件输出的目录
}); //生产环境,异步rev
gulp.task('build', ['cleanimgs','cleanhtml','cleanjs','cleandistcss','imgs','html','es6','revcss'],function(){
gulp.start('rev');
});
目录结构
在src中写开发环境代码,在dist中生成html代码。分别执行gulp dev个gulp build。
src的目录结构
dist的目录结构
rev下
本文结束。
基于gulp的前端自动化开发构建新的更多相关文章
- 基于gulp的前端自动化开发构建
就前端的发展而言会越来越朝着后端的标准化靠近,后端的工程化以及模块化都很成熟.基于这样一个思路,开始探索如何优化目前的开发流程.而使用的工具就是gulp. 个人觉得gulp比较webpack更为简单实 ...
- 基于gulp 的前端自动化构建方案总结
一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...
- 基于gulp的前端自动化方案
前言 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载
今天我们继续来进行webpack工程化开发的探索! 首先来验证上一篇文章 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML 中的遗留问题:webpack将如何处理按需加载的 ...
随机推荐
- Linux-3.5-Exynos4412驱动分层分离
linux-3.5/Documentation/driver-model/bus.txt 先写一个简单的例子,是为了给学习platform做准备. dev.h #ifndef JASON_DEV_H_ ...
- 利用 Python 插件 xlwings 读写 Excel
Python 通过 xlwings 读取 Excel 数据 去年底公司让我做设备管理,多次委婉拒绝,最终还是做了.其实我比较喜欢技术.做管理后发现现场没有停机率统计,而原始数据有,每次要自己在Exce ...
- Java学习笔记十八:Java面向对象的三大特性之封装
Java面向对象的三大特性之封装 一:面向对象的三大特性: 封装 继承 多态 二:封装的概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访 ...
- VXLAN简介(摘抄)
VXLAN简介 VXLAN:Virtual eXtensible Local Area Network的缩写,虚拟扩展局域网,现代数据中心的的一种网络虚拟化技术,即在传统的三层IP网络上虚拟出一张二层 ...
- JS本地保存数据的几种方法
1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...
- 笔记-django第一个项目
笔记-django第一个项目 1. 创建项目 安装 Django 之后,现在有了可用的管理工具 django-admin.可以使用 django-admin 来创建一个项目: 看下djang ...
- Java设计模式(17)——行为模式之观察者模式(Observer)
一.概述 概念 UML简图 我们根据一个示例得类图来分析角色 角色 抽象主题:保存观察者聚集(集合),管理(增删)观察者 抽象观察者:定义具体观察者的抽象接口,在得到主题通知后更新自己 具体主题:将有 ...
- 成都Uber优步司机奖励政策(3月28日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- CakePHP 总结
1. 处理任何保存或获取数据的操作最好都写在模型(Model)中.这个概念通常被称为fat model. 2. 返回上一条插入记录的ID, $this->Example->getInser ...
- JS代码优化及技巧
案例一 对象参数独立化 情景:为多个日期文本框添加日期选择器 源代码: $('#PropertySalesAdviceExchnagedDate1').datepicker({ showOn: 'b ...