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,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; gulp.src('src/html/*.html') .pipe(htmlmin(options)) .pipe(gulp.dest('dist/html')); });
- 压缩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/'));
});