使用gulp 合并压缩打包,实时监控文件,实现本地server
今天不讲webpack,就说说gulp是怎么进行压缩合并打包
首先你的安装gulp :
npm install gulp -g --save-dev
然后最基本的你因该知道gulp 的四个方法,
gulp.src:读取文件
gulp.pipe:将文件流输入到指定的文件目录
gulp.task:建立gulp任务,例如合并,压缩,清除文件,
gulp.watch:用于监听文件的变化
关于其他的嘛,那就是gulp 之所以那么强大,原因就是他有很多插件,我们要完成一些功能就必须要学会使用一些插件
1)在这里我给出package.json 文件中的devDependencies
"gulp": "^3.9.1", //安装gulp
"gulp-clean": "^0.3.2", //gulp的清除插件,主要用于每次打包发布,为了不出差错,我们希望要删除之前的一些文件
"gulp-concat": "^2.6.1", //合并文件
"gulp-connect": "^5.0.0", //建立一个本地server,这样我们就可以使用localhost:port 访问我们的项目了
"gulp-livereload": "^3.8.1", //实时监控
"gulp-minify-css": "^1.2.4", //压缩css
"gulp-minify-html": "^1.0.6", //压缩html
"gulp-open": "^2.0.0", //一般与gulp-connect使用,
"gulp-rev": "^8.1.0", //主要用于缓存文件,给文件加上一个MD5后缀。
"gulp-rev-collector": "^1.2.3", //主要用于缓存文件处理,替换文件[这里可以去了解gulp 缓存的问题,百度一下]
"gulp-sequence": "^0.4.6", //多个任务的执行顺序控制
"gulp-sync": "^0.1.4",
"gulp-uglify": "^3.0.0", //压缩js
2)在你完成一系列安装之后,接下就是使用安装的插件完成一些东西。
首先你的在你的项目文件夹中有一个gulpfile.js文件【这个文件你可以把他看作你的gulp 启动文件】
在这个文件中你可以一一引进你安装的gulp插件
例如:
var gulp = require("gulp"); //压缩
var uglify = require("gulp-uglify");
var minifyCss = require("gulp-minify-css");
var minifyHtml = require("gulp-minify-html"); //清除不不要的文件
var gulpclean = require('gulp-clean');
// npm install gulp-open --save-dev //本地打开一个地址
var open=require("open"); //npm install --svae-dev gulp-livereload(重新加载,刷新)
var livereload = require('gulp-livereload'); //npm install --svae-dev gulp-connect(本地服务器)
var connect= require('gulp-connect'); //npm install --save-dev gulp-rev-collector
//npm install --save-dev gulp-sync
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector'); //合并文件(用于压缩之后)
//npm install --save-dev gulp-concat
var concat = require('gulp-concat'); //多个任务的顺序执行
//npm install --save-dev gulp-sequence
var gulpSequence = require('gulp-sequence');
当然你也可以用一个简单的方法,可以去get一下gulp-load-plugins
的使用
3)好了现在就正式使用了
gulp.task('js',function(){
return gulp.src('myPro/js/**/*.js')
.pipe(concat('main.js')) //- 合并后的文件名
.pipe(uglify()) //使用uglify进行压缩,更多配置请参考:
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest()) //- 生成一个rev-manifest.json(这个文件是我们控制缓存文件的关键,主要用于文件替换)
.pipe(gulp.dest('dist/rev/js'))
.pipe(livereload());
}); gulp.task('html',function(){
return gulp.src('myPro/**/*.html')
.pipe(minifyHtml()) //压缩
//.pipe(rev())
.pipe(gulp.dest('dist'))
.pipe(livereload());
}); gulp.task('css',function(){
return gulp.src('myPro/css/**/*.css')
.pipe(concat('main.css'))
.pipe(minifyCss()) //压缩css
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('dist/rev/css')) //- 将 rev-manifest.json 这个文件是我们控制缓存文件的关键,主要用于文件替换)
.pipe(livereload());
}); gulp.task('watch', function() {
/*
livereload.listen({
start:true,
port:8080,
reloadPage:"index.html" }); //要在这里调用listen()方法
*/ //自动刷新
livereload.listen();
//构建本地服务器
connect.server({
root:['myPro'],//从开发文件读取(默认是index.html)
livereload:true,//重新刷新(针对高级浏览器)
port:,//端口号
});
open("http://localhost:8091");//自动打开地址,网页
//监听改变的文件,只要有以下的文件内容变化,就会刷新
gulp.watch('myPro/css/**/*.css', ['css']);
gulp.watch('myPro/html/**/*.html', ['html']);
gulp.watch('myPro/js/**/*.js', ['js']);
}); //清除dist文件夹
gulp.task("clean",function(){
console.log("......do clearing......");
return gulp.src(['dist'],{read: false}) //{read: false}直接进行删除,不需要读取文件
.pipe(gulpclean({force: true})) //{force: true}强制删除
.pipe(livereload());
}); //使用gulp-rev替换文件,清除缓存的弊端问题
gulp.task("rev",function(){
return gulp.src(['dist/**/*.json','dist/**/*.html'])
.pipe(revCollector({
replaceReved: true,
}))
.pipe(gulp.dest('dist'))
.pipe(livereload());
}); //建立一个总的任务
gulp.task("build",['js','css','html','watch']);
//gulp.task("default",['build']); //直接运行gulp 默认启动server,会一次执行clean ,[js,css,html,html](中括号里的同步执行),rev ,watch
//可以去了解一下gulpSequence的用法
gulp.task("default",function(cd){
gulpSequence('clean',['js','css','html'],'rev','watch')(cd)
});
值得注意的是:在每个任务的回调函数我们有必要进行返回通知,通知后面的任务当前这个任务执行完啦,可以接着执行下面的任务啦。。。。。。
在这里只是说如何使用(也只是使用了一部分),至于原理没做深入了解。。。
https://github.com/EvalGitHub/angular1_require_gulp
使用gulp 合并压缩打包,实时监控文件,实现本地server的更多相关文章
- 关于用gulp合并压缩seaJs模块
现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享 ...
- gulp合并压缩
1.文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’); 接下来,只要conca ...
- 使用grunt合并压缩js、css文件
需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- grunt 合并压缩js和css文件(二)
具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...
- gulp不压缩打包layui
从网上下载的layui都是压缩包,如何打包在一个文件且不压缩呢?如下方法: 1.https://gitee.com/sentsin/layui下载源码(本文的为2.4.5版本) 2.安装nodejs( ...
- 玩转gulp之压缩打包热重载
上节上上节我们讲了gulp的sass编译和watch监听,动态加载 这样我们就可以做到,我管我写我的sass然后保存,自动编译,就好像我们在写css一样,这是一个自动化的一大步.我们呱唧呱唧. 我们已 ...
- Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览
github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...
- flume+sparkStreaming实例 实时监控文件demo
1,flume所在的节点不和spark同一个集群 v50和 10-15节点 flume在v50里面 flume-agent.conf spark是开的work节点,就是单点计算节点,不涉及到mast ...
随机推荐
- 【译】MVC3 20个秘方-(15)使用CAPTCHA去防止恶意软件自动提交评论(防灌水)
[译]MVC3 20个秘方-(15)使用CAPTCHA去防止恶意软件自动提交评论(防灌水) 问题 有种不太幸运的情况,有人用自动程序去提交表单,在整个互联网中造成大量的垃圾.为了防止这种情况的方法 ...
- [转]利用docker进行java开发小demo
http://www.codeceo.com/article/docker-java-development.html
- struts2 的学习
1.struts.xml 中的action不是代表一个action类(控制器),而是代表一次访问,所以action的name属性和访问路径有关.配置文件中的package的namespace属性其实就 ...
- (C/C++学习笔记) 十一. 数组
十一. 数组 ● 基本概念 数组:数组是一组在内存中依次连续存放的(数组所有元素在内存中的地址是连续的).具有同一类型的数据变量所组成的集合体.其中的每个变量称为数组元素,它们属于同一种数据类型,数组 ...
- DevExpress v18.1新版亮点——WinForms篇(五)
用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress WinForms v18.1 的新功能,快来下载试用新版本! ...
- STL标准库-Tuple
技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 在前面我介绍过一次tuple,今天在书上也看到了tuple,那就在写一次吧. tuple(元组),他的内部可以放任意类型的变量( ...
- oracle索引原理
B-TREE索引(二叉树索引,默认情况下,我们建的索引都是此种类型) 一个B树索引只有一个根节点,它实际就是位于树的最顶端的分支节点.可以用下图一来描述B树索引的结构.其中,B表示分支节点,而L表示叶 ...
- pdo 数据库链接
在PHP中,我们还可以使用一种更为简单直接的数据库连接方案——PDO持久化连接. 关于PDO本身,这里就不再多作介绍了,大家可以参考之前的文章<使用PDO连接多种数据库>以及PHP官方网站 ...
- 一张图让你学会Python
有编程基础的人一看就可以了解 Python 的用法了.真正的 30 分钟上手.国外一高手画的,现把它翻译成中文,入门超简单python入门神图 *单击放大
- xcode cocos2dx升级
原文转自:http://www.codeo4.cn/archives/690 cocos2d-x的安装脚本里没有升级的脚本,我们如果在新版本安装的时候加上参数:-f 强制安装也没有能完全解决问题.新建 ...