人生第一段gulp代碼

人生第一段gulp代碼

學習新技術一定要有用處，只有不斷使用，真正投入實戰，新技術纔會不斷被磨鍊，才能真正被掌握。

公司的電腦加裝了一塊顯示屏，爲了充分利用兩塊屏幕，我想到要實現自動刷新瀏覽器的功能。這樣我就能在寫CSS代碼的時候不離開鍵盤去刷新瀏覽器來查看頁面效果了。

聽說gulp的功能強大，我一直想學，正好藉此機會，研究一下gulp，其實也不是很難，以下就是gulp監聽CSS文件變動，並刷新瀏覽器的代碼，這也是我人生第一段gulp代碼：

//安裝node、gulp、browser-sync的過程就不贅述了 
var gulp = require('gulp');
var BrowserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    //因爲已經用Tomcat啓動了服務器，所以這裏用了代理服務，這也是難點
    BrowserSync.init({
        proxy: 'http://localhost:8080/ms-console/'
    });
});

gulp.task('watch', function() {
    //監聽Tomcat下的CSS文件，若有變動就重新加載BrowserSync
    gulp.watch('D:/apache-tomcat-7.0.53/apache-tomcat-7.0.53/webapps/ms-console/static/css/statement/lines_month.css').on('change',BrowserSync.reload);
});

//定義gulp任務
gulp.task('default', ['browser-sync', 'watch']);