gulp使用配置

gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也很是簡單，學習起來很容易，並且gulpjs使用的是nodejs中stream來讀取和操做數據，其速度更快。若是你尚未使用過前端構建工具，或者以爲gruntjs太難用的話，那就嘗試一下gulp吧。

1.安裝gulp

npm install -g gulp

2.切換到項目文件夾後建立gulpfile.js  以下：

var gulp = require('gulp'); var uglify = require('gulp-uglify'); var minifycss = require('gulp-minify-css'); var concat = require('gulp-concat'); var rename = require('gulp-rename'); gulp.task('minifyjs',function() { return gulp.src([ 'static/scripts/jquery.js', 'static/scripts/moment.js', 'static/scripts/socket.io.js', 'static/scripts/app.js', 'static/scripts/app.request.js', 'static/scripts/app.login.js', 'static/scripts/app.chat.js', 'static/scripts/app.init.js' ]).pipe(concat('all.js')).pipe(uglify()).pipe(gulp.dest('static/scripts/')); }); gulp.task('minifycss',function() { return gulp.src([ 'static/styles/zee.css', 'static/styles/app.css' ]).pipe(concat('all.css')).pipe(minifycss()).pipe(gulp.dest('static/styles')); }); gulp.task('default', function() { gulp.start('minifyjs', 'minifycss'); }); gulp.task('watch',function() { var watcher = gulp.watch([ 'static/scripts/jquery.js', 'static/scripts/moment.js', 'static/scripts/socket.io.js', 'static/scripts/app.js', 'static/scripts/app.request.js', 'static/scripts/app.login.js', 'static/scripts/app.chat.js', 'static/scripts/app.init.js', 'static/styles/zee.css', 'static/styles/app.css' ]); watcher.on('change', function(event) { gulp.start('minifyjs', 'minifycss'); }); });

3. 安裝插件

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev

4.進入終端執行命令

gulp
gulp watch #這個是用來監聽文件改動的