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

 

posted @ 2016-09-20 19:33  飘飞的夏秋  阅读(1137)  评论(0编辑  收藏  举报