使用gulp解決外部編輯器修改Eclipse文件延遲刷新

時間 2019-12-01

標籤使用 gulp 解決外部編輯器修改 eclipse 文件延遲刷新欄目 JavaScript 简体版

原文原文鏈接

本人前端用慣了Hbuilder，修改了eclipse項目中的文件後，因爲是外部編輯器修改過的，eclipse不會自動部署更新，通常按F5刷新項目，或者在 preferences > general > workspace 設置更新，但這個方法也須要等七、8秒才能被部署更新。本節介紹用gulp解決這個問題。css

先睹爲快，猛戳連接下載Demo ：http://pan.baidu.com/s/1o8pmrH4html

因爲是在gulp環境下才能運行，不熟悉gulp的同窗，能夠參考這個比較詳細的教程：http://www.ydcss.com/archives/18前端

須要說明，個人項目是在E盤下，所以gulp也安裝在E盤下，這樣能夠加快gulp運行速度。不建議在項目下面安裝gulp，由於gulp生成的node_modules目錄文件不少，會形成項目每次啓動很慢，而且對svn或者git也不友好。node

運行cnpm install --save-dev 安裝gulpgit

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的同窗能夠先忽略，不影響後面的閱讀。web

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查看：npm

srcFile變量存放的是源文件的路徑，箭頭指向的文件夾下面的全部文件只要有了更新，都須要從新部署的gulp

文件有更改後，從新部署須要執行的任務：

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 ，而後掛着便可。sass

補充：還有一種更直接方法，參考解決外部編輯器修改Eclipse文件延遲刷新【補充】

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

歡迎轉載，轉載請註明做者：飄飛的夏秋和出處 http://www.cnblogs.com/chenchenghua/p/5957642.html