1。基于流的自动化构建工具。1.全局安装gulp`npminstall--globalgulp`2.安装`npminstall--save-devgulp`作为项目开发依赖3.在项目根目录下创建一个名为gulpfile.js的文件：`vargulp=require('gulp');gulp.task('default',function(){//将你的默认任务代码放在这里});`4.运行gulp`gulp`2。API1.src()创建一个用于从文件中读取虚拟对象的流。`gulp.src('./js/hello.js')`匹配字符_,_*,!、{}`gulp.src('./js/*.js')//*匹配js文件夹下的所有.js文件gulp.src('./js/**/*.js')//**匹配js文件夹的0个或多个子文件夹gulp.src(['./js/*.js','!./js/index.js'])//!matchesexceptindex.jsalljsfilesexceptgulp.src('./js/**/{omui,common}.js')//{}匹配{}中的文件名`2.dest()用于创建虚拟对象写入文件系统的流。`gulp.src('./js/hello.js')//读取hello.js并保存为虚拟对象.pipe(gulp.dest('./dist/js/'));//使这个虚拟对象在dist的js文件中写入`3.task(name,function(){})来定义任务系统中的任务。`gulp.task('onetask',function(){//任务定义为onetaskreturngulp.src('./js/hello.js').pipe(gulp.dest('./dist/js/'));});`4.run()运行任务`gulp.task('onetask',function(){//任务定义为onetaskreturngulp.src('./js/hello.js').pipe(gulp.dest('./dist/js/'));});gulp.run('onetask');`3。Gulp常用插件文件操作相关del说明：删除文件或文件夹。`vardel=require('del');del('./dist');//删除整个dist文件夹`gulp-rename说明：重命名文件。`varrename=require("gulp-rename");gulp.src('./hello.txt').pipe(rename('gb/goodbye.md'))//直接修改文件名和路径.pipe(一饮而尽.dest('./dist'));gulp.src('./hello.txt').pipe(rename({dirname:"text",//路径名basename:"goodbye",//主文件名prefix:"pre-",//前缀后缀:"-min",//后缀extname:".html"//extension})).pipe(gulp.dest('./dist'));`gulp-concat说明：合并文件。`varconcat=require('gulp-concat');gulp.src('./js/*.js').pipe(concat('all.js'))//合并all.jsfiles.pipe(gulp.dest('./dist'));gulp.src(['./js/demo1.js','./js/demo2.js','./js/demo2.js']).pipe(concat('all.js'))//按照[].pipe(gulp.dest('./dist'))中的顺序合并文件；`gulp-filter描述：过滤虚拟文件流中的文件。`varfilter=require('gulp-filter');constf=filter(['**','!*/index.js']);gulp.src('js/**/*.js').pipe(f)//过滤掉index.jsfile.pipe(gulp.dest('dist'));constf1=filter(['**','!*/index.js'],{restore:true});gulp.src('js/**/*.js').pipe(f1)//过滤掉文件index.js.pipe(uglify())//压缩其他文件.pipe(f1.restore)//返回所有未过滤执行的文件.pipe(gulp.dest('dist'));//然后对所有文件进行操作，包括index.js`文件压缩gulp-uglify描述：压缩js文件大小。`varuglify=require("gulp-uglify");gulp.src('./hello.js').pipe(uglify())//直接压缩hello.js.pipe(gulp.dest('./dist'))gulp.src('./hello.js').pipe(uglify({mangle:true,//是否修改变量名，默认为truecompress:true,//是否完全压缩，默认为truepreserveComments:'all'//保留所有注释})).pipe(gulp.dest('./dist'))`gulp-cssodescription:compresscss`varcsso=require('gulp-csso');gulp.src('./css/*.css').pipe(csso()).pipe(gulp.dest('./dist/css'))`gulp-html-minify描述：缩小HTML。`varhtmlminify=require('gulp-html-minify');gulp.src('index.html').pipe(htmlminify()).pipe(gulp.dest('./dist'))`gulp-imagemin描述：压缩图像。`varimagemin=require('gulp-imagemin');gulp.src('./img/*.{jpg,png,gif,ico}').pipe(imagemin()).pipe(gulp.dest('./dist/img'))`gulp-zip描述：ZIP压缩文件。`varzip=require('gulp-zip');gulp.src('./src/*').pipe(zip('all.zip'))//压缩成all.zipfile.pipe(gulp.dest('./dist'))`JS/CSS自动注入gulp-autoprefixer描述：自动给css添加浏览器前缀。`varautoprefixer=require('gulp-autoprefixer');gulp.src('./css/*.css').pipe(autoprefixer())//直接添加前缀pipe(gulp.dest('dist'))gulp.src('./css/*.css').pipe(autoprefixer({browsers:['last2versions'],//浏览器版本cascade:true//美化属性，默认trueadd:true//是否添加前缀，默认trueremove:true//删除过时的前缀，默认trueflexbox:true//给flexbox属性添加前缀，默认true})).pipe(gulp.dest('./dist'))`gulp-rev说明：给静态资源文件名添加哈希值：unicorn.css=>unicorn-d41d8cd98f.css`varrev=require('gulp-rev');gulp.src('./css/*.css').pipe(rev()).pipe(gulp.dest('./dist/css'))`工具gulp-sass说明：编译sass。`varsass=require('gulp-sass');gulp.src('./sass/**/*.scss').pipe(sass({outputStyle:'compressed'//配置输出方式，默认嵌套})).pipe(gulp.dest('./dist/css'));gulp.watch('./sass/**/*.scss',['sass']);//实时监控sass文件变化，执行sass任务`gulp-babel描述：将ES6代码编译成ES5。`varbabel=require('gulp-babel');gulp.src('./js/index.js').pipe(babel({presets:['es2015']})).pipe(gulp.dest('./dist'))`gulp-base64说明：将css文件中引用的图片转为base64。`varbase64=require('gulp-base64');gulp.src('./css/*.css').pipe(base64({maxImageSize:8*1024,//只将8kb以下的图片转为base64})).pipe(gulp.dest('./dist'))`
