gulp原生方法
- gulp.src() src方法指定需要处理的源文件路径
例如：gulp.src('src/js/*.js') gulp.src(['src/**/*',‘!src/a.js‘])
“*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；
“**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；
- gulp.dest() dest方法指定处理完成后文件的输出路径
- gulp.task() 定义一个gulp任务 gulp.task('任务名称',['依赖的任务（可选）’],function(){ })
- gulp.watch() watch用于监听文件变化
gulpfile文件常用函数
- 拷贝文件
gulp.task('copy', function(){ gulp.src('src/fonts/**/*') .pipe(gulp.dest('dist/fonts/')) }) - 创建本地服务器
var connect=require('gulp-connect'); gulp.task('myServer', function() { connect.server({ root: 'app', port: 8000, livereload: true }); }); //其中root是服务启动的根目录，换句话说别人通过IP+Port端口访问到你的服务器所访问到文件夹就是root（这里是'app'），port就是端口了，livereload是一个标志，为true时gulp会自动检测文件的变化然后自动进行源码构建。 - 合并文件
var concat = require('gulp-concat');gulp.task('concat', function () { gulp.src('src/js/*.js') .pipe(concat('all.js'))//合并后的文件名 .pipe(gulp.dest('dist/js'));}); - 压缩html文件
var htmlmin = require('gulp-htmlmin');gulp.task('testHtmlmin', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 ==> removeEmptyAttributes: true,//删除所有空格作属性值 ==> removeScriptTypeAttributes: true,//删除 - 压缩js文件
var uglify = require('gulp-uglify') gulp.task('uglifyjs', function () { gulp.src('src/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')) }) - 压缩图片
var imagemin = require('gulp-imagemin');gulp.task('Imagemin', function () { gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(imagemin()) .pipe(gulp.dest('dist/img'));}); - 压缩css文件
var minifycss = require('gulp-minify-css')gulp.task('testCssmin', function () { gulp.src('src/css/*.css') .pipe(minifycss()) .pipe(gulp.dest('dist/css'));}); - 编译less文件
var less=require('gulp-less'); gulp.task('less',function(){ gulp.src('src/**/*.less') .pipe(less()) .pipe(gulp.dest('src/css/')); });