使用gulp前的准备工作:
gulp的安装
1- 安装nodejs环境。然后以全局方式安装gulp:
npm install -g gulp
2- 到你的项目文件夹下执行以下命令,按照提示,生成package.json文件:
npm init
3- 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。
把目录切换到你的项目文件夹中,然后在命令行中执行:
npm install gulp
如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--save-dev
:(我用的是这个)
npm install --save-dev gulp
4- 在项目根目录创建gulpfile.js文件
关于src路径匹配的一些规则如下:
gulp.src('./js/*.js') // *匹配js文件夹下所有.js格式的文件
gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹
gulp.src(['./js/*.js','!./js/index.js']) // ! 匹配除了index.js之外的所有js文件
gulp.src('./js/**/{omui,common}.js') // {} 匹配{}里的文件名
我的gulpfile.js文件如下(后面会给出注释):
var gulp = require('gulp'),
RevAll = require('gulp-rev-all'),
useref = require('gulp-useref'),
filter = require('gulp-filter'),
uglify = require('gulp-uglify'),
csso = require('gulp-csso'),
htmlminify = require('gulp-html-minify'),
autoprefixer = require('gulp-autoprefixer'),
del = require('del');
gulp.task('default', ['del'], function(){
var jsFilter = filter('js/**/*.js', {restore: true}),
cssFilter = filter('css