使用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