gulp两种配置方式总结
如何打包发布？
主流的3个工具：Grunt,Gulp,Webpack
其中：Grunt,Gulp是自动化构建工具
Webpack是静态资源打包工具
总的来说，如果在资源打包发布方面，webpack功能更全面，而且的版本也更新；而在自动化构建方面，现在基本都用gulp，它的性能更好；
因为gulp利用Node.js流的威力，可以快速构建项目并减少频繁的IO操作；
可以理解为：每个文件或一堆文件，他们合在一起，读取出来，就像水一样流向最终的目标；任务就像水管中的一个个的过滤器，这样可以减少频繁的IO操作，只需要一个个的过下过滤器，最终输出出来；可以更快速的构建前端代码；
开发项目之前，目录结构说明
bower_components //前端包管理器
build // 构建代码之后
dist // 产品发布的目录：部署和发布
node_modules //后台包管理器
src //源码所存放的目录
.eslintrc //eslintrc 配置文件，校验JS语法风格
.gitignore//忽略文件
gulpfile.js //gulp配置文件
package.json //配置项目依赖
#自动化构建工具 gulp
优点：
基于流，任务化
可以对我们写完的项目进行自动打包处理
压缩
合并
增加版本号
常用API：src 读,dest 写,watch 监控,task 定制任务,pipe 用流的方式处理
基本命令
npm init -y
npm i -g gulp
npm i gulp --save-dev
安装gulp插件
gulp
gulp-clean //执行任务前先删除一次build目录
gulp-concat //使用gulp-concat合并javascript文件,减少网络请求
gulp-connect //浏览器自动刷新
gulp-cssmin //压缩css文件
gulp-imagemin //压缩图片
gulp-less //将less文件编译成css
gulp-load-plugins //可以加载package.json文件中所有的gulp模块。避免一个个手动加载的问题；
gulp-uglify //压缩javascript文件,减小文件大小 open 编写任务 lib html json less js image clean reload watch
编写配置文件
引入必要的模块；并配置gulpfile.js
var gulp=require(‘gulp’);
var = r e q u i r e ( ′ g u l p − l o a d − p l u g i n s ′ ) ( ) ; / / 我 们 其 他 g u l p 模 块 都 可 以 直 接 用 =require('gulp-load-plugins')();//我们其他gulp模块都可以直接用=require(′gulp−load−plugins′)();//我们其他gulp模块都可以直接用引入，不需要声明变量了
var open=require(‘open’); //open单独引入，因为他没有以gulp开头
//app：用来定义目录路径；
var app={ srcPath:‘src/’,//源代码目录 devPath:‘build/’,//开发目录，整合之后的文件 prdPath:‘dist/’//生产上线目录，生产和部署 }; //拷贝文件：拷贝第三方文件到开发和生产目录； gulp.task(‘lib’,function () { gulp.src(‘bower_components//*.js’)///：对当前bower_components下所有文件，进行深度遍历；同时读取所有文件 .pipe(gulp.dest(app.devPath+‘vendor’)) //拷贝到开发，并重命名 .pipe(gulp.dest(app.prdPath+‘vendor’)) //拷贝到生产目录； .pipe(KaTeX parse error: Expected 'EOF', got '}' at position 51: …级浏览器支持IE9及9以上； }̲); //拷贝html gul….connect.reload()) }) //json gulp.task(‘json’,function () { gulp.src(app.srcPath+’/data/**/.json’) .pipe(gulp.dest(app.devPath+‘data’)) .pipe(gulp.dest(app.prdPath+‘data’)) .pipe(KaTeX parse error: Expected 'EOF', got '}' at position 20: …nect.reload()) }̲) //以下任务会有变化 //….less()) .pipe(gulp.dest(app.devPath+‘css’)) .pipe(. c s s m i n ( ) ) / / 运 用 生 产 环 境 之 前 ， 先 压 缩 下 ； . p i p e ( g u l p . d e s t ( a p p . p r d P a t h + ′ c s s ′ ) ) . p i p e ( .cssmin()) //运用生产环境之前，先压缩下； .pipe(gulp.dest(app.prdPath+'css')) .pipe(.cssmin())//运用生产环境之前，先压缩下；.pipe(gulp.dest(app.prdPath+′css′)).pipe(.connect.reload()) }) //js gulp.task(‘js’,function () { gulp.src(app.srcPath+‘scripts//*.js’)
.pipe(. c o n c a t ( ′ i n d e x . j s ′ ) ) / / 进 行 J S 代 码 合 并 ； 合 并 后 到 开 发 环 境 . p i p e ( g u l p . d e s t ( a p p . d e v P a t h + ′ j s ′ ) ) . p i p e ( .concat('index.js')) //进行JS代码合并；合并后到开发环境 .pipe(gulp.dest(app.devPath+'js')) .pipe(.concat(′index.js′))//进行JS代码合并；合并后到开发环境.pipe(gulp.dest(app.devPath+′js′)).pipe(.uglify()) //压缩后，再发布到生产环境 .pipe(gulp.dest(app.prdPath+‘js’)) .pipe(KaTeX parse error: Expected 'EOF', got '}' at position 20: …nect.reload()) }̲) //image gulp.….imagemin()) .pipe(gulp.dest(app.prdPath+‘image’)) .pipe(KaTeX parse error: Expected 'EOF', got '}' at position 20: …nect.reload()) }̲) //以上就完成静态资源文件….clean()) })
//写一个总的任务，把以上任务进行合并起来，以后想打包整个项目，只需要执行build任务即可； gulp.task(‘build’,[‘image’,‘js’,‘less’,‘lib’,‘json’,‘html’]); //问题：开发完一段代码后，想看看它的实际效果，我们得build，然后启动服务器，到服务器中去查看； //自动化打包编译，并运行服务器 gulp.task(‘serve’,[‘build’],function () { . c o n n e c t . s e r v e r ( r o o t : [ a p p . d e v P a t h ] , l i v e r e l o a d : t r u e , / / 自 动 加 载 p o r t : 1234 ) / / 自 动 打 开 浏 览 器 o p e n ( ′ h t t p : / / l o c a l h o s t : 123 4 ′ ) / / 实 现 自 动 编 译 ； 我 们 希 望 的 是 ， 每 更 改 一 段 代 码 ， 它 自 动 编 译 ， 并 自 动 刷 新 浏 览 器 来 查 看 g u l p . w a t c h ( a p p . s r c P a t h + ′ s c r i p t / ∗ ∗ / ∗ . j s ′ , [ ′ j s ′ ] ) / / 监 控 J S 文 件 ， 并 执 行 j s 任 务 ； / / l i b 一 般 不 变 更 ， 所 以 不 用 对 他 进 行 监 控 ， 如 果 要 监 控 ， 监 控 静 态 资 源 源 文 件 的 书 写 如 下 g u l p . w a t c h ( ′ b o w e r c o m p o n e n t s / ∗ ∗ / ∗ ′ , [ ′ l i b ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ ∗ ∗ / ∗ . h t m l ′ , [ ′ h t m l ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ d a t a / ∗ ∗ / ∗ . j s o n ′ , [ ′ j s o n ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ s t y l e s / ∗ ∗ / ∗ . l e s s ′ , [ ′ l e s s ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ s c r i p t s / ∗ ∗ / ∗ . j s ′ , [ ′ j s ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ i m a g e / ∗ ∗ / ∗ ′ , [ ′ i m a g e ′ ] ) / / 如 果 想 实 现 " 实 时 预 览 " ， 还 需 要 添 加 .connect.server({ root:[app.devPath], livereload:true,//自动加载 port:1234 }) //自动打开浏览器 open('http://localhost:1234') //实现自动编译；我们希望的是，每更改一段代码，它自动编译，并自动刷新浏览器来查看 gulp.watch(app.srcPath+'script/**/*.js',['js']) //监控JS文件，并执行js任务； //lib一般不变更，所以不用对他进行监控，如果要监控，监控静态资源源文件的书写如下 gulp.watch('bower_components/**/*',['lib']) gulp.watch(app.srcPath+'**/*.html',['html']) gulp.watch(app.srcPath+'data/**/*.json',['json']) gulp.watch(app.srcPath+'styles/**/*.less',['less']) gulp.watch(app.srcPath+'scripts/**/*.js',['js']) gulp.watch(app.srcPath+'image/**/*',['image']) //如果想实现"实时预览"，还需要添加.connect.server(root:[app.devPath],livereload:true,//自动加载port:1234)//自动打开浏览器open(′http://localhost:1234′)//实现自动编译；我们希望的是，每更改一段代码，它自动编译，并自动刷新浏览器来查看gulp.watch(app.srcPath+′script/∗∗/∗.js′,[′js′])//监控JS文件，并执行js任务；//lib一般不变更，所以不用对他进行监控，如果要监控，监控静态资源源文件的书写如下gulp.watch(′bowercomponents/∗∗/∗′,[′lib′])gulp.watch(app.srcPath+′∗∗/∗.html′,[′html′])gulp.watch(app.srcPath+′data/∗∗/∗.json′,[′json′])gulp.watch(app.srcPath+′styles/∗∗/∗.less′,[′less′])gulp.watch(app.srcPath+′scripts/∗∗/∗.js′,[′js′])gulp.watch(app.srcPath+′image/∗∗/∗′,[′image′])//如果想实现"实时预览"，还需要添加.connect.reload()函数，在每个任务下面 }) //问题：每次都要手动执行任务，好麻烦，所以可以设置默认任务；以后直接调用gulp即可； gulp.task(‘default’,[‘serve’]) 也可以使用如下插件进行简单配置： gulp-rev; //给每个文件添加版本号，根据文件的内容算出每个文件的哈希码 使用： .pipe(rev()) gulp-rev-replace //更新index中的文件引用（因为文件被添加了不同的hash） gulp-useref //在html中通过注释的方法，写一些设置；用来合并JS和css的； gulp-filter //他是一个过滤器，filter可以筛选出一些文件做一些处理；然后再放入,restore就是扔回去 var jsFilter=filter(’/.js’,{restore:true}) var cssFilter=filter(’**/.css’,{restore:true}) var indexHtmlFilter=filter([’/*’,’!/index.html’],{restore:true}) .pipe(jsFilter.restore) .pipe(cssFilter.restore) .pipe(indexHtmlFilter.restore) gulp-uglify gulp-csso
使用和配置如上插件
gulp.task(‘default’,function(){ var jsFilter=filter(’/*.js’,{restore:true}) var cssFilter=filter(’/.css’,{restore:true}) var indexHtmlFilter=filter([’**/’,’!**/index.html’],{restore:true}) //注意：首页不加版本号； return gulp.src(‘src/index.html’) .pipe(useref()) //在html中通过注释的方法，写一些设置；用来合并JS和css的； .pipe(jsFilter) //筛选出需要处理的JS文件 .pipe(uglify()) //把这些文件压缩处理 .pipe(jsFilter.restore) //把文件扔回去 .pipe(cssFilter) .pipe(csso()) .pipe(cssFilter.restore) .pipe(indexHtmlFilter) .pipe(rev()) //排除首页后，对其他html文件加入hash; .pipe(indexHtmlFilter.restore) .pipe(revReplace()) //把index中的引用进行更新 .pipe(gulp.dest(‘dist’))//最后把文件流扔到最终目录； })
注意：
1:／!xxx／(含*!)这类型的注释不会被压缩；
2:不去删除老的版本，担心用户正在观看还没更新，就无法访问了；
其他有用的插件
gulp-postcss给css加前缀
gulp-responsive 把大图生成一系列响应式图片
