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 #这个是用来监听文件改动的

转载于:https://www.cnblogs.com/shoestrong/p/5946812.html