使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题
本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > general > workspace 设置更新,但这个方法也需要等7、8秒才能被部署更新。本节介绍用gulp解决这个问题。
先睹为快,猛戳链接下载Demo :http://pan.baidu.com/s/1o8pmrH4
由于是在gulp环境下才能运行,不熟悉gulp的同学,可以参考这个比较详细的教程:http://www.ydcss.com/archives/18
需要说明,我的项目是在E盘下,因此gulp也安装在E盘下,这样可以加快gulp运行速度。不建议在项目下面安装gulp,因为gulp生成的node_modules目录文件很多,会造成项目每次启动很慢,并且对svn或者git也不友好。
运行cnpm install --save-dev 安装gulp
gulpfile.js文件如下:
var gulp = require('gulp'),
changed = require('gulp-changed'),
sass = require('gulp-sass'),
cssmin = require('gulp-clean-css'), //压缩css
autoprefixer = require('gulp-autoprefixer'), //添加浏览器前缀
clean = require('gulp-clean'), //清理文目标文件夹
csso = require('gulp-csso'), //合并css属性
csslint = require('gulp-csslint'), //css语法检查
csscomb = require('gulp-csscomb'), //css 样式表的各属性的顺序
cache = require('gulp-cache')
; var target = 'E:/eclipse/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/TalentAuction/';
//target = 'F:/test/';
var srcFile = 'E:/TalentAuction/WebRoot/',
srcFileView = srcFile+'views/**/*.html',
srcFileViews2 = srcFile+'views2/**/*.html',
srcFileJs = srcFile+'js/**/*.js',
srcFileCss = srcFile+'css/**/*.css',
srcFileSassCommon = srcFile+'sass2/common/**/*.scss',
srcFileSassController = srcFile+'sass2/controller/**/*.scss',
srcFileSassWap = srcFile+'sass2/wap/**/*.scss',
srcFileImg = srcFile+'css/img/**/*.{jpg,png}'
;
/*由于外部编辑器修改后,需要七八秒eclipse才能监听到文件,因此直接复制文件到eclipse发布的目录*/
gulp.task('copyViews', function() {
gulp.src(srcFileView)
.pipe(changed(target+'views'))
.pipe(gulp.dest(target+'views')); });
gulp.task('copyViews2', function() {
gulp.src(srcFileViews2)
.pipe(changed(srcFileViews2))
.pipe(gulp.dest(target+'views2')); });
gulp.task('copyJs', function() {
gulp.src(srcFileJs)
.pipe(changed(srcFileJs))
.pipe(gulp.dest(target+'js')); });
gulp.task('copyCss', function() {
gulp.src(srcFileCss)
.pipe(changed(srcFileCss))
.pipe(gulp.dest(target+'css')); });
gulp.task('copyImg', function() {
gulp.src(srcFileImg)
.pipe(changed(srcFileImg))
.pipe(gulp.dest(target+'css/img')); }); gulp.task('sassCommon',function () {
gulp.src(srcFileSassCommon)
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(csso())
.pipe(csslint())
.pipe(gulp.dest(srcFile+'css/common2'))
.pipe(gulp.dest(target+'css/common2')); //同时更改到eclipse发布的目录下
}); gulp.task('sassController',function () {
gulp.src(srcFileSassController)
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(csso())
.pipe(csslint())
.pipe(gulp.dest(srcFile+'css/common2'))
.pipe(gulp.dest(target+'css/common2'));
}); gulp.task('sassWap',function () {
gulp.src(srcFileSassWap)
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(csso())
.pipe(csslint())
.pipe(gulp.dest(srcFile+'css/mobile'))
.pipe(gulp.dest(target+'css/mobile'));
}); gulp.task("autowatch",function(){
gulp.watch([srcFileView],['copyViews']);
gulp.watch([srcFileViews2],['copyViews2']);
gulp.watch([srcFileJs],['copyJs']);
//gulp.watch([srcFileCss],['copyCss']);
gulp.watch([srcFileSassCommon],['sassCommon']);
gulp.watch([srcFileSassController],['sassController']);
gulp.watch([srcFileSassWap],['sassWap']);
gulp.watch([srcFileImg],['copyImg']);
}); gulp.task('default',['autowatch']);//定义默认任务
下面开始解剖:
var gulp = require('gulp'),
changed = require('gulp-changed'),
sass = require('gulp-sass'),
cssmin = require('gulp-clean-css'), //压缩css
autoprefixer = require('gulp-autoprefixer'), //添加浏览器前缀
clean = require('gulp-clean'), //清理文目标文件夹
csso = require('gulp-csso'), //合并css属性
csslint = require('gulp-csslint'), //css语法检查
csscomb = require('gulp-csscomb'), //css 样式表的各属性的顺序
cache = require('gulp-cache')
;
这个是需要安装的插件,由于我项目用的sass,才需要这么多css相关的东西,没用过sass的同学可以先忽略,不影响后面的阅读。
项目目录以及发布目录:
var target = 'E:/eclipse/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/TalentAuction/';
//target = 'F:/test/';
var srcFile = 'E:/TalentAuction/WebRoot/',
srcFileView = srcFile+'views/**/*.html',
srcFileViews2 = srcFile+'views2/**/*.html',
srcFileJs = srcFile+'js/**/*.js',
srcFileCss = srcFile+'css/**/*.css',
srcFileSassCommon = srcFile+'sass2/common/**/*.scss',
srcFileSassController = srcFile+'sass2/controller/**/*.scss',
srcFileSassWap = srcFile+'sass2/wap/**/*.scss',
srcFileImg = srcFile+'css/img/**/*.{jpg,png}'
;
target变量存放的是eclipse部署的目录,在eclipse启动完项目后,可以在console查看:
srcFile变量存放的是源文件的路径,箭头指向的文件夹下面的所有文件只要有了更新,都需要重新部署的
文件有更改后,重新部署需要执行的任务:
gulp.task('copyViews', function() {
gulp.src(srcFileView)
.pipe(changed(target+'views'))
.pipe(gulp.dest(target+'views')); });
gulp.task('copyViews2', function() {
gulp.src(srcFileViews2)
.pipe(changed(srcFileViews2))
.pipe(gulp.dest(target+'views2')); });
gulp.task('copyJs', function() {
gulp.src(srcFileJs)
.pipe(changed(srcFileJs))
.pipe(gulp.dest(target+'js')); });
gulp.task('copyCss', function() {
gulp.src(srcFileCss)
.pipe(changed(srcFileCss))
.pipe(gulp.dest(target+'css')); });
gulp.task('copyImg', function() {
gulp.src(srcFileImg)
.pipe(changed(srcFileImg))
.pipe(gulp.dest(target+'css/img')); });
由于项目用的是sass,因此监听的是scss文件的变化:
gulp.task('sassCommon',function () {
gulp.src(srcFileSassCommon)
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(csso())
.pipe(csslint())
.pipe(gulp.dest(srcFile+'css/common2'))
.pipe(gulp.dest(target+'css/common2')); //同时更改到eclipse发布的目录下
}); gulp.task('sassController',function () {
gulp.src(srcFileSassController)
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(csso())
.pipe(csslint())
.pipe(gulp.dest(srcFile+'css/common2'))
.pipe(gulp.dest(target+'css/common2'));
}); gulp.task('sassWap',function () {
gulp.src(srcFileSassWap)
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(csso())
.pipe(csslint())
.pipe(gulp.dest(srcFile+'css/mobile'))
.pipe(gulp.dest(target+'css/mobile'));
});
如果有的同学没有用相关的预处理框架,而是直接是用css,也可以直接监听css文件。
添加监听任务:
gulp.task("autowatch",function(){
gulp.watch([srcFileView],['copyViews']);
gulp.watch([srcFileViews2],['copyViews2']);
gulp.watch([srcFileJs],['copyJs']);
//gulp.watch([srcFileCss],['copyCss']);
gulp.watch([srcFileSassCommon],['sassCommon']);
gulp.watch([srcFileSassController],['sassController']);
gulp.watch([srcFileSassWap],['sassWap']);
gulp.watch([srcFileImg],['copyImg']);
}); gulp.task('default',['autowatch']);//定义默认任务
完成后,每天上班执行 gulp autowatch ,然后挂着即可。
补充:还有一种更直接方法,参考解决外部编辑器修改Eclipse文件延迟刷新【补充】
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
欢迎转载,转载请注明作者:飘飞的夏秋 和出处 http://www.cnblogs.com/chenchenghua/p/5957642.html
使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题的更多相关文章
- 使用gulp解决外部编辑器修改Eclipse文件延迟刷新
本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...
- 解决外部编辑器修改Eclipse文件延迟刷新【补充】
在之前的文章,使用gulp解决外部编辑器修改Eclipse文件延迟刷新,原理是用gulp把更改过的项目文件直接复制一份到Tomcat的webapp.root下, 现在补充另外一种方法,双击Server ...
- 修改 eclipse 文件编码格式
如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace)的缺省字符编码是操作系统缺省的编码,简 ...
- Intellij Idea修改css文件即时更新生成效果
用来Idea也有一段时间了,觉得还是有很多地方没有用到,今天遇到了一个问题,百度了解决方法,正好在这里做一个小记录 主要问题是我在idea的项目里面修改了css文件,然后运行web文件,发现并没有做到 ...
- Vi编辑器修改文件.bash_profile可解决backspace出现乱码问题,rlwrap 的安装。
Vi编辑器修改文件.bash_profile可解决backspace出现乱码问题 使用SecureCRT或是pietty_ch连接到一台安装有Oracle DB 10g的RHEL4.2的机器,linu ...
- net 编译报错:编辑器或项目正在尝试签出在内存中修改的文件,这将导致保存该文件
1,报错提示: 编辑器或项目正在尝试签出在内存中修改的文件,这将导致保存该文件. 在生成过程中保存文件是危险的,这可能会在将来导致不正确的生成输出. 是否仍然继续签出? 2,原因:licenses.l ...
- eclipse 修改js文件无法编译到项目中
1.场景重现 在今天修改js文件完善功能时,发现在eclipse中修改了文件后,刷新页面功能无法同步: 2.分析原因 查看编译路径,文件没有修改: 2.1 可能是缓存问题: 2.2 项目未编译: 3. ...
- Gulp解决发布线上文件(CSS和JS)缓存问题
Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...
- eclipse工具类及插件(修改eclipse.ini文件及作者名字)
https://jingyan.baidu.com/album/9158e0005633c0a254122807.html?picindex=1 (修改eclipse.ini文件及作者名字) http ...
随机推荐
- ucos实时操作系统学习笔记——任务间通信(互斥锁)
想讲一下ucos任务间通信中的mutex,感觉其设计挺巧妙,同sem一样使用的是event机制实现的,代码不每一行都分析,因为讲的没邵贝贝老师清楚,主要讲一下mutex的内核是如何实现的.可以理解互斥 ...
- EMC与地之重新认识地
记得在Mark的培训中,他手上拿了一个无线鼠标,然后问了一个很有意思的问题:“这个无线鼠标的地在哪里?同样,我们的手机没有和任何大地有接 触,那么这个地又在哪里呢?”这个问题确实很有意思,也确实让人很 ...
- SubSonic3.0使用存储过程查询时,不能使用output参数返回值的问题修改
有个群友问SubSonic3.0执行存储过程时能不能使用output参数返回值,说测试过后获取不到返回值,早上有些时间所以就尝试修改了一下 首先在数据库中创建一个存储过程 CREATE PROCEDU ...
- geotrellis使用(二十三)动态加载时间序列数据
目录 前言 实现方法 总结 一.前言 今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...
- PPT转化成Image、PPTX、XPS、EMF
最近工作经常用到演示文稿,接触到了一款不错的免费软件—Free Spire.Presentation.使用之后发现这款软件非常轻巧,功能还挺齐全.这款软件的转化功能也是非常不错的,平时遇到的各种转换难 ...
- The Road To Hadoop(网盘系统的实现)
因为毕业设计的原因,得从零开始学习hadoop.虽然接触Hadoop也有一段时间了,但是没有一个完整的时间段去学习,在公司实习的同时,只能利用零零碎碎的时间学习,今天完成了第一个版本的基于Hadoop ...
- 用CIL写程序:写个函数做加法
前言: 上一篇文章小匹夫为CIL正名的篇幅比较多,反而忽略了写那篇文章初衷--即通过写CIL代码来熟悉它,了解它.那么既然有上一篇文章做基础(炮灰),想必各位对CIL的存在也就释然了,兴许也燃起了一点 ...
- Unity3D中常用的数据结构总结与分析
来到周末,小匹夫终于有精力和时间来更新下博客了.前段时间小匹夫读过一份代码,对其中各种数据结构灵活的使用赞不绝口,同时也大大激发了小匹夫对各种数据结构进行梳理和总结的欲望.正好最近也拜读了若干大神的文 ...
- LeetCode Online Judge 1. Two Sum
刷个题,击败0.17%... Given an array of integers, return indices of the two numbers such that they add up t ...
- .NET缓存框架CacheManager在混合式开发框架中的应用(1)-CacheManager的介绍和使用
在我们开发的很多分布式项目里面(如基于WCF服务.Web API服务方式),由于数据提供涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发式增长,如果数据库服务器 ...