关于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的前端自动化开发构建新的更多相关文章

  1. 基于gulp的前端自动化开发构建

    就前端的发展而言会越来越朝着后端的标准化靠近,后端的工程化以及模块化都很成熟.基于这样一个思路,开始探索如何优化目前的开发流程.而使用的工具就是gulp. 个人觉得gulp比较webpack更为简单实 ...

  2. 基于gulp 的前端自动化构建方案总结

    一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...

  3. 基于gulp的前端自动化方案

    前言 ​ 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好 ...

  4. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  5. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  6. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  7. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  8. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  9. 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载

    今天我们继续来进行webpack工程化开发的探索! 首先来验证上一篇文章   基于webpack的前端工程化开发解决方案探索(一):动态生成HTML  中的遗留问题:webpack将如何处理按需加载的 ...

随机推荐

  1. Linux-3.5-Exynos4412驱动分层分离

    linux-3.5/Documentation/driver-model/bus.txt 先写一个简单的例子,是为了给学习platform做准备. dev.h #ifndef JASON_DEV_H_ ...

  2. 利用 Python 插件 xlwings 读写 Excel

    Python 通过 xlwings 读取 Excel 数据 去年底公司让我做设备管理,多次委婉拒绝,最终还是做了.其实我比较喜欢技术.做管理后发现现场没有停机率统计,而原始数据有,每次要自己在Exce ...

  3. Java学习笔记十八:Java面向对象的三大特性之封装

    Java面向对象的三大特性之封装 一:面向对象的三大特性: 封装 继承 多态   二:封装的概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访 ...

  4. VXLAN简介(摘抄)

    VXLAN简介 VXLAN:Virtual eXtensible Local Area Network的缩写,虚拟扩展局域网,现代数据中心的的一种网络虚拟化技术,即在传统的三层IP网络上虚拟出一张二层 ...

  5. JS本地保存数据的几种方法

    1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...

  6. 笔记-django第一个项目

    笔记-django第一个项目 1.      创建项目 安装 Django 之后,现在有了可用的管理工具 django-admin.可以使用 django-admin 来创建一个项目: 看下djang ...

  7. Java设计模式(17)——行为模式之观察者模式(Observer)

    一.概述 概念 UML简图 我们根据一个示例得类图来分析角色 角色 抽象主题:保存观察者聚集(集合),管理(增删)观察者 抽象观察者:定义具体观察者的抽象接口,在得到主题通知后更新自己 具体主题:将有 ...

  8. 成都Uber优步司机奖励政策(3月28日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. CakePHP 总结

    1. 处理任何保存或获取数据的操作最好都写在模型(Model)中.这个概念通常被称为fat model. 2. 返回上一条插入记录的ID, $this->Example->getInser ...

  10. JS代码优化及技巧

    案例一  对象参数独立化 情景:为多个日期文本框添加日期选择器 源代码: $('#PropertySalesAdviceExchnagedDate1').datepicker({ showOn: 'b ...