首页 > 代码库 > gulp使用配置

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.进入终端执行命令

gulpgulp watch #这个是用来监听文件改动的

gulp使用配置