gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具。目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等。
这个鬼东西有什么用?请参考https://www.zhihu.com/question/35595198
为什么选择gulp,因为使用非常简单,学习成本低。以后想用别的工具再转去学也不难。
一个自动化构建工具都没用过的前端,何以谈人生?
以下是正题:
1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具。具体下载直接百度nodejs中文网,根据自身的环境(windows linux mac)下载安装包(msi)。直接进行傻瓜式安装。
2.安装完node后开始全局安装gulp, 在命令行输入命令 npm install -g gulp ,安装成功后就可以在命令行输入gulp相关的命令了,例如gulp -v查看当前版本号。(npm安装不成功建议在命令前加sudo 或将 npm 换 cnpm 再试试)
3.在项目中安装 npm install --save-dev gulp,安装成功后就可以开始写配置文件了。
4.在项目根目录中创建文件 gulpfile.js
以下是简单的gulpfile.js demo代码
代码这种东西一开始不会写,就先抄,抄着抄着就懂怎么写了。
//引入插件
var gulp = require('gulp');
var less = require('gulp-less');//需要npm install --save-dev gulp-less var paths = ['./css/*.less']; //定义一个数组,指定文件路径
//下面开始编写一个任务
//less编译任务
gulp.task('less', function() { //创建一个gulp任务,任务名字是'less',然后一个回调函数
return gulp.src(paths) //gulp任务操作的源文件'paths'
.pipe(less()) //执行less编译
.pipe(gulp.dest('./css')); //gulp任务输出的新文件
});
//watch监听任务
gulp.task('watch', function(){ //创建第二个gulp任务,任务名字是‘watch',然后一个回调函数
gulp.watch(paths,['less']); //gulp的watch监听,文件改动后立即重新执行less任务 可参考http://www.gulpjs.com.cn/docs/api/
});
//gulp.watch('default',['less']);
gulp.task('default', ['less','watch']); //gulp的default任务,相当于glup的执行入口。然后把less任务和watch放进来,该脚本就会执行这两个任务
把以上代码写入gulpfile.js 后保存,然后项目根路径下执行命令
gulp
就开始执行gulp完成你安排的任务。
日常开发中需要gulp做的有很多如合并文件(gulp-concat)压缩(gulp-uglify)重命名(gulp-rename)等等。
这就需要自己编写task来让gulp来执行。
最后总结一下,写好一个gulpfile.js很简单,结合demo代码和下面五个命令
gulp.task(name, fn)//新建一个gulp任务,name是任务名,fn回调函数 gulp.run(tasks...)//尽可能多的并行运行多个task 新版本中的gulp中使用run会发出警告,这样的情况下我们可以用start代替 gulp.watch(glob, fn//)当glob内容发生改变时,执行fn gulp.src(glob)//返回一个可读的stream gulp.dest(glob)//返回一个可写的stream
需要更多的说明或者操作可以去下面的网站逛一逛
gulp官方网址:http://gulpjs.com
gulp插件地址:http://gulpjs.com/plugins
最后简单写就几个常用的gulp task,方便日后调用
一、压缩css
var minifycss = require('gulp-minify-css');//引用插件,需npm install --save-dev gulp-minify-css
gulp.task('minifycss', function() {
return gulp.src('src/css/*.css') //压缩的文件
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('dst/css')); //输出文件夹
});
二、压缩js
var concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'); //引用插件,需npm install --save-dev xxxxxx gulp.task('minifyjs', function() { return gulp.src('src/*.js') //操作的源文件 .pipe(concat('main.js')) //合并所有js到main.js .pipe(gulp.dest('minified/js')) //输出main.js到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('minified/js')); //输出 });
三、清空输出目录
var del =require('del');
gulp.task('clean', function() {
return del(['dst']); //'dst'是一个目录
});
四、压缩图片
const imagemin = require('gulp-imagemin'); gulp.task('default', function(){
return gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
五、压缩html
var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'); gulp.task('htmlMin', 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('dst'));
});
六、合并文件
var concat = require('gulp-concat'); gulp.task('concat', function () {
gulp.src('src/js/*.js')
.pipe(concat('all.js'))//合并后的文件名
.pipe(gulp.dest('dist/js'));
});
七、css自动处理浏览器前缀,如添加-webkit-解决浏览器兼容问题
var autoprefixer = require('gulp-autoprefixer'); gulp.task('autoprefixer', function () {
gulp.src('css/index.css')
.pipe(autoprefixer())
.pipe(gulp.dest('dist/css'));
});
八、给文件加上MD5戳
var rev = require('gulp-rev');
gulp.task('rev', function() {
return gulp.src([config.src + config.resource])
.pipe(rev()) //加上MD5戳
.pipe(gulp.dest(config.app))//输出文件
.pipe(rev.manifest())//生成rev-manifest.json,该文件用于替换HTML CSS文件中引用的MD5文件路径
.pipe(gulp.dest(config.rev))//rev-manifest.json文件放在rev目录下
});
九、给html css文件替换路径
var revCollector = require('gulp-rev-collector');
gulp.task('revCollector', function() {
return gulp.src(['rev/*.json', 'config/*.css','config/*.html']) //读取 rev-manifest.json 文件以及需要进行文件名替换的文件
.pipe(revCollector({
replaceReved: true
})) //执行文件内引用名的替换
.pipe(gulp.dest('config/app')); //替换后的文件输出的目录
});
十、修改文件后自动编译less/sass
见文章首部demo讲解
十一、修改文件后自动刷新浏览器
browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('watch',function(){
browserSync({
server:{
baseDir:'./src' //设置项目根目录,由此启动一个服务器
}
});
gulp.watch('src/*.html',reload);//监听html文件,文件变动马上自动刷新浏览器页面
});
当设定的文件发生变动时,会自动启动一个本地服务器localhost:3000,然后读取baseDir中的目录。
如果你的文件就在服务器里,代码需要修改成这样
// 代理
gulp.task('watch', function() {
browserSync.init({
proxy: "你的域名或IP"
});
gulp.watch('src/*.html',reload);//监听html文件,文件变动马上自动刷新浏览器页面
});
如果对于browser-sync还有疑问请看
browser-sync+gulp中文说明网:http://www.browsersync.cn/docs/gulp/
browser-sync中文网:http://www.browsersync.cn/
以上十个代码块本人亲测能用。如果不能用请检查是否install 是否require 语法是否错误等等。仍有疑问请联系。
本文原创,转载文章之后必须在文章页面明显位置给出作者和原文连接。
gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全的更多相关文章
- gulp自动化压缩合并、加版本号解决方案
虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...
- gulp css 压缩 合并
//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 concat = require(' ...
- gulp系列:自动构建及刷新浏览器
2016年3月3日 14:50:15 晴 .清空目录 常用插件 gulp-clean .del (nodejs模块)del = require('del')#2.文件复制 原生模块gulp,插 ...
- Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)
本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换
- gulp学习指南之CSS合并、压缩与MD5命名及路径替换
1.引入插件 var gulp = require('gulp'), // uglify = require('gulp-uglify'), concat = require('gulp-concat ...
- gulp之css,js压缩合并加密替换
为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- gulp完成javascript压缩合并,css压缩
最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...
- gulp实时编译less,压缩合并requirejs模块文件
gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...
随机推荐
- hdu4405 Aeroplane chess
Aeroplane chess Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- redis 间断性耗时长问题解决
我发现开发项目用的redis 隔一两分钟就出现 耗时问题,长达五秒.一开始以为是 redis 服务器不稳定,但运维测试发现redis稳定的,在高并发下最大耗时也就只有100毫秒左右,怎么也不可能达到5 ...
- Burp Suite新手指南
Burp Suite想必大家都用过,但是大家未必知道它的所有功能.因此,本文的主要目的就是尽量深入介绍各种功能.BurpSuite有以下这些功能: 截获代理– 让你审查修改浏览器和目标应用间的流量. ...
- 基于Unity3D 的Vuforia SDK开发基础教程
最新博客地址已转到: http://blog.csdn.net/zzlyw?viewmode=contents ------------------------------------------ ...
- c#反射机制
一:反射的定义 审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等. Sys ...
- window 安装grunt
1.先安装nodejs ,npm ,参考 http://www.cnblogs.com/seanlv/archive/2011/11/22/2258716.html 2 安装grunt 百度搜索 参考 ...
- marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...
- 总结:在MyEclipse中部署一个wap应用时需要配置的环境变量,我的JDK是安装在C盘,mysql安装在D盘,Tomcat解压在E盘,所以路径一定要看清楚哦,!
- iOS10 远程推送代码 以及服务器端代码(.net)
// // AppDelegate.m // MyPushDemo // // Created by justapple on 16/12/25. // Copyright © 2016年 dengq ...
- LeetCode 299 Bulls and Cows
Problem: You are playing the following Bulls and Cows game with your friend: You write down a number ...