热门框架vue开发企业级步骤四项目实战-gulp

GulpGulp是一个Node模块Gulp是个任务管理工具Gulp主要用在构建流程中初识Gulp主要作用压缩css，js，

等静态资源打包合并必要的资源文件处理浏览器长缓存初识Gulp插件机制Gulp的实际功能基本都是靠插件完成可以非常方便得实现自己的插件初识Gulp初识Gulp相对Grunt的优势速度快配置简单基于流进行构建安装和介绍Gulp安装Gulp安装Node环境npm

install

gulp-cli

-gnpm

install

gulp

-D安装和介绍Gulp创建gulp任务创建gulpfile.js文件使用gulp.task来创建任务安装和介绍GulpGulp常用指令和任务嵌套Gulp常用指令和任务嵌套常用指令gulp.taskgulp.srcgulp.destgulp.watchgulp.task(name[,

deps][,fn])gulp.task用来创建一个任务，接收两个参数，name代表任务的名称，deps是该任务依赖于别的任务，fn是该任务需要执行的内容Gulp常用指令和任务嵌套gulp.src(globs[,

options])gulp.src用来指定任务执行的对象，即目标文件。该指令接收两个参数，globs是文件路径，options是一些配置参数Gulp常用指令和任务嵌套gulp.watch(glob

[,

opts],

tasks

|

cb)gulp.watch用来监视对象的变化，一旦有变化会执行相应的任务。该指令接收三个参数，glob是需要监视的目标文件地址；opts是一个对象，包含一些配置参数；最后一个参数可以是之前指定好的任务，也可以是一个方法。Gulp常用指令和任务嵌套压缩和打包jsUglify

js：

/mishoo/UglifyJS使用gulp-uglify来在gulp执行压缩压缩和打包jsgulp-concat：

/contra/gulp-concat使用gulp-concat来执行js合并操作需要注意js合并的先后顺序压缩和打包jscss打包压缩、预处理方案及postcss打包压缩使用gulp-csso进行css压缩使用gulp-concat-css来进行css合并css打包压缩、预处理方案及postcsscss打包压缩、预处理方案及postcsscss预处理器预处理器是可编译成css的一种高级封装比较流行的预处理器有sass，less，cssnext等css预处理器可以解决css缺少编程能力的缺点使用gulp执行less预处理任务gulp-less可以在gulp中执行less预处理的插件一般在开发中会监视less文件变化css打包压缩、预处理方案及postcssPostcsspostcss提供了非常多优化css的工具使用postcss-autoprefixer自动加浏览器前缀css打包压缩、预处理方案及postcssgulp-postcssgulp-postcss提供

在gulp中执行postcss的能力css打包压缩、预处理方案及postcss压缩为什么要做

压缩的空间一般较大，很多

可以在保证展示质量的情况下进行一些压缩，这样可以降低

流量同时加快

速度css打包压缩、预处理方案及postcssgulp-imagemin/sindresorhus/gulp-imagemincss打包压缩、预处理方案及postcssgulp处理文件 缓存缓存浏览器根据HTTP头Cache-Control来判断是否要缓存文件，通过这个机制，

可以让浏览器缓存css，js，

等耗流量的静态文件gulp处理文件 缓存如何刷新缓存更新文件名以强制浏览器加载新文件在静态资源url后面加上版本号gulp处理文件

缓存gulp-babelbabelbabel的功能是将的js语法转义成主流浏览器普遍支持的es5语法，以此来提供项目在开发阶段可以使用

js语法的功能gulp-babelgulp-babelgulp-babel提供gulp工作流操作babel的功能使用babelrc文件来配置配置babelgulp-babellivereload作用在开发阶段需要经常修改静态资源文件，每次更新文件要查看效果时都需要刷新浏览器。lievereload让在更新资源文件之后浏览器自动执行刷新livereload