前端自动化(三)   合并压缩css、压缩js、添加时间戳、打包上线操作


此文在前两篇基础上对比参考,会很方便理解

gulp.task("delete",function(){
return del("./dist/")
console.log("delete is end");
});
译:删除不需要的

gulp.task("copyHtml",function(){
return gulp.src("./dev/*.html")
.pipe(gulp.dest("./dist/"))
console.log("copyHtml is end");
});
译:拷贝出来html页面到dist下

var concat=require("gulp-concat");   //合并文件(一般只做css的合并,js互相独立的,压缩即可)

gulp.task("concatCss",function(){
console.log("concatCss is starting……")
return gulp.src("./dev/static/css/**/*.css")
.pipe(plumber()) 
.pipe(concat("all.css"))
.pipe(gulp.dest("./dev/static/css/out/"));
});
译:找到所需要合并的css文件,合并为“all.css”,输出到新的目录

gulp.task("copyCss",function(){
console.log("copyCss is starting……")
return gulp.src("./dev/static/css/out/*.css")
.pipe(gulp.dest("./dist/static/css/out"))
});
译:找到开发环境下“dev”文件下的css,复制到上线环境下"dist"下,一般情况,不需要动dev下的代码

var csso=require("gulp-csso"); //压缩css

gulp.task("csso",function(){
 console.log("csso is starting…… ")
 return gulp.src(['./dist/static/css/out/*.css'])
    .pipe(csso())
.pipe(gulp.dest("./dist/static/css/out"));
});
译:压缩dist下的css

var rev=require("gulp-rev");         //md5时间戳

gulp.task("promd5Css",function(){
console.log("promd5Css is starting……")
return gulp.src(["./dist/static/css/out/*.css"])
    .pipe(rev())
    .pipe(gulp.dest("./dist/static/css/out/"))
    .pipe(rev.manifest())
    .pipe(gulp.dest("./dist/static/css/out/"))
  });
译:找到dist下的css,编译添加时间戳,输出。再也不需要手动进行修改了

var revCollector=require("gulp-rev-collector"); //做替换的

gulp.task("proCss",function(){
console.log("proCss is starting……")
return gulp.src(["./dist/static/css/out/*.json","./dist/*.html"])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest("./dist/"))
});
译:找到对应的映射表和html页面,进行link替换

gulp.task("copyJs",function(){
console.log("copyJs is starting……")
return gulp.src("./dev/static/js/**/*.js")
.pipe(gulp.dest("./dist/static/js"))
});
译:找到开发环境下“dev”文件下的js,复制到上线环境下"dist"下,

var uglify=require("gulp-uglify");              //压缩js 

gulp.task("uglifyJs",function(){
console.log("uglifyJs is starting……")
return gulp.src(["./dist/static/js/def/*.js"])
.pipe(uglify())
.pipe(gulp.dest("./dist/static/js/out/"))
});

译:压缩dist下的js

gulp.task("promd5Js",function(){
console.log("promd5Js is starting……")
return gulp.src(["./dist/static/js/out/*.js","!./dist/static/js/out/jquery-1.7.2.min.js"])
    .pipe(rev())
    .pipe(gulp.dest("./dist/static/js/out/"))
    .pipe(rev.manifest())
    .pipe(gulp.dest("./dist/static/js/out/"))
  });
 
译:找到dist下的js,编译添加时间戳,输出

gulp.task("proJs",function(){
console.log("proJs is starting……")
return gulp.src(["./dist/static/js/out/*.json","./dist/*.html"])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest("./dist/"))
});

译:找到对应的映射表和html页面,进行src替换

var runSequence=require("gulp-run-sequence");   //排序

gulp.task("build",function(){
runSequence("delete","copyHtml","copyCss","csso","promd5Css","proCss","copyJs","uglifyJs","uglifyJs","promd5Js","proJs")
});

按照如上任务名字,进去顺序执行任务

当dos窗口输入:gulp build命令之后
项目文件夹,会生成一个全新的  dist文件夹
包括 
 
 


如上操作,解决了:
css和js体积过大的导致加载过慢的问题;
每次上线时候,不需要在手动去修改时间戳,没有了所谓的缓存问题,所引用的链接
都生成了哈希值方式(比如:all-49d50a1512.css),每次修改之后,上线之后,都是全新的链接.
上线的都是静态的html文件,加载速度快
修改公共头部部分,只需要修改一个jade模板,在build一下即可,不依托js库,分分钟可以修改几十个含有共同部分的页面)
解决了之前PC站点,拥有相同导航header的时候,必须依赖js的的窘境
最后,我们只需要把dist文件夹,放到服务器环境即可,摆脱了eclipse环境
 
参考链接:http://files.cnblogs.com/files/leshao/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%EF%BC%88%E4%B8%89%EF%BC%89.rar
 
多谢"田兄"数日指点迷津,方可熟练此方法.

前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作的更多相关文章

  1. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  2. gulp压缩css和js

    压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...

  3. 【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS

    在开发中编写的js.css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担.这就得每次发版本的时候,对js.js进行压缩,然后再发布.有没有什么办法,让代码到了服务器上边,它自己进行压缩 ...

  4. Maven使用yuicompressor-maven-plugin打包压缩css、js文件

    最近项目想使用在maven打包的时间压缩js,css文件,采用yuicompressor-maven-plugin插件进行压缩,但只是压缩减小大小,提高请求速度,并没有对js进行混淆.下面就写一下这个 ...

  5. 压缩css与js

    使用yuicompressor 进行css和js的压缩 #! /bin/sh yasuocss="java -jar /root/yuicompressor-2.4.8.jar --type ...

  6. 前端自动化之路之gulp,node.js

    随着现在前端技术的不断发展,和各个公司对前端项目开发更新速度的要求,前端自动化越来越受到大家的重视,之前传统的前端开发方式已经越来越不能满足开发的需求了,于是各种自动化工具随之产生了.而gulp就是其 ...

  7. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  8. Nginx网络压缩 CSS压缩 图片压缩 JSON压缩

    一.序言 使用Nginx作为web应用服务时,会代理如下常见文件:js.css.JSON.图片等,本文提供基于Nginx内置的压缩技术,提供网络请求响应速度的解决方案. 1.网络压缩原理 网络压缩的原 ...

  9. PHP为前端CSS和JS增加时间戳版本号

    一.PHP代码如下: function addVersion($url){ $version = date("Y-m-d H:i:s",filemtime($_SERVER['DO ...

随机推荐

  1. 深入理解 Promise

    自从ES6流行起来,Promise 的使用变得更频繁更广泛了,比如异步请求一般返回一个 Promise 对象,Generator 中 yield 后面一般跟 Promise 对象,ES7中 Async ...

  2. 什么是BSD?

       BSD (Berkeley Software Distribution,伯克利软件套件)是Unix的衍生系统,1970年代由加州大学伯克利分校开创.BSD用来代表由此派生出的各种套件集合. BS ...

  3. 自动化运维工具——puppet详解(二)

    一.class 类 1)什么是类? 类是puppet中命名的代码模块,常用于定义一组通用目标的资源,可在puppet全局调用: 类可以被继承,也可以包含子类: 具体定义的语法如下: class NAM ...

  4. OpenCV基础篇之查找表

    程序及分析 /* * FileName : lookup_table.cpp * Author : xiahouzuoxin @163.com * Version : v1.0 * Date : Su ...

  5. Python datatime 格式转换,插入MySQL数据库

    Python datatime 格式转换,插入MySQL数据库 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-11-2 ...

  6. Data Base mongodb driver2.5环境注意事项

    mongodb driver2.5环境注意事项 一.问题: 如果使用vs2012开发就会报这个错误: 未能加载文件或程序集“System.Runtime.InteropServices.Runtime ...

  7. CSS文字不换行,溢出省略

    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  8. IOS学习2——Xcode快捷键大全

    转载自:图文解释XCode常用快捷键的使用 刚开始用Xcode是不是发现以前熟悉的开发环境的快捷键都不能用了?怎么快捷运行,停止,编辑等等.都不一样了.快速的掌握这些快捷键,能提供开发的效率. 其实快 ...

  9. iOS Label 自适应高度

    推荐第二个 测试一,只改变numberOfLines属性,label的高度不会自适应(会有text中的一部分内容称为......) NSString *str = @"jgreijgirje ...

  10. xCode8以及iOS10 的新特性

    其他:ios10中 适配问题(1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8.UserN ...