node 使用 gulp 建立本地服務

打開終端全局安裝 gulp 模塊

npm install -g gulp    //全局安裝 gulp（輕量級自動化項目構建工具）

 cd  進入到項目文件夾，能夠到看到 package.json 配置文件：

{  "name": "ionic-project",  "version": "1.0.0",  "description": "An Ionic project",  "dependencies": {    "gulp": "^3.5.6",    "gulp-sass": "^0.7.1",      // sass支持  
   "gulp-concat": "^2.2.0",    // 合併文件
   "gulp-minify-css": "^0.3.0", // 壓縮css
   "gulp-rename": "^1.2.0"    // 文件重命名
 }
}

首先 cd 到本身的項目目錄

執行命令：npm install    // 經過npm安裝依賴，gulp的一些plugins就搞定了。 

若是配置的 web 服務器須要自動刷新，能夠在上面加上 "gulp-connect" 插件，或者直接執行命令安裝：npm install gulp-connect. 

配置 gulpfile.js 

這是gulp的配置文件，咱們如今只要對它進行一下配置就能夠運行項目了，代碼以下，已經加入註釋：

// 引入gulp
var gulp = require('gulp');

// 引入gulp-plugins
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

// 定義sass文件路徑var paths = {
 sass: ['./scss/**/*.scss']
};

/*
 建立sass任務，它會監聽./scss/ionic.app.scss裏面的文件變化，而後編譯爲css到./www/css/目錄.
 而後進行css壓縮，將壓縮後的文件重命名爲min.css結尾，而後仍是放到./www/css/目錄下。  
*/

gulp.task('sass', function(done) {
 gulp.src('./scss/ionic.app.scss')
   .pipe(sass())
   .pipe(gulp.dest('./www/css/'))
   .pipe(minifyCss({
     keepSpecialComments: 0
   }))
   .pipe(rename({ extname: '.min.css' }))
   .pipe(gulp.dest('./www/css/'))
   .on('end', done);
});

//watch任務，監聽文件變化gulp.task('watch', function() {
 gulp.watch(paths.sass, ['sass']);
 gulp.watch(['./www/*.html'], ['html']);
});

// connect任務，監聽項目變化後自動刷新項目

gulp.task('connect', function(){

   connect.server({

       port: 3000,

       root:'www',

       livereload: true

   });

});

gulp.task('html', function () {
 gulp.src('./www/*.html')
   .pipe(connect.reload());
});

// default默認任務，今後開始執行
gulp.task('default', ['connect','sass','watch']);

/**

 * Created by Jack on 15/10/25.

 */

var gulp = require('gulp');

var connect = require('gulp-connect');

gulp.task('watch', function(){

   gulp.watch(['./www/*.html'], ['html']);

});

安裝完成後便可用 gulp 命令來創建本地服務

最後在瀏覽器中輸入 localhost:3000 (默認是 8080)便可訪問