gulp使用配置

Posted 2020-08-14 Shoestrong

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