使用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\']);//定义默认任务

View Code

下面开始解剖：

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

gulpfile.js文件如下：

下面开始解剖：

项目目录以及发布目录：

文件有更改后，重新部署需要执行的任务：

由于项目用的是sass，因此监听的是scss文件的变化：

添加监听任务：