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 $=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($.connect.reload()) //通知服务器刷新浏览器，只有高级浏览器支持IE9及9以上；
});
//拷贝html
gulp.task('html',function () {
    gulp.src(app.srcPath+'**/*.html')
        .pipe(gulp.dest(app.devPath))
        .pipe(gulp.dest(app.prdPath))
        .pipe($.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($.connect.reload())
})
//以下任务会有变化
//css
gulp.task('less',function () {
    gulp.src(app.srcPath+'/styles/index.less')
        .pipe($.less())
        .pipe(gulp.dest(app.devPath+'css'))
        .pipe($.cssmin()) //运用生产环境之前，先压缩下；
        .pipe(gulp.dest(app.prdPath+'css'))
        .pipe($.connect.reload())
})
//js
gulp.task('js',function () {
    gulp.src(app.srcPath+'scripts/**/*.js')
        .pipe($.concat('index.js')) //进行JS代码合并；合并后到开发环境
        .pipe(gulp.dest(app.devPath+'js'))
        .pipe($.uglify()) //压缩后，再发布到生产环境
        .pipe(gulp.dest(app.prdPath+'js'))
        .pipe($.connect.reload())
})
//image
gulp.task('image',function () {
    gulp.src(app.srcPath+'image/**/*')
        .pipe(gulp.dest(app.devPath+'image'))
        .pipe($.imagemin())
        .pipe(gulp.dest(app.prdPath+'image'))
        .pipe($.connect.reload())
})
//以上就完成静态资源文件的合并和压缩；
//编写清除任务:删除了build和dist目录
gulp.task('clean',function () {
    gulp.src([app.devPath,app.prdPath])
        .pipe($.clean())
})
//写一个总的任务，把以上任务进行合并起来，以后想打包整个项目，只需要执行build任务即可；
gulp.task('build',['image','js','less','lib','json','html']);
//问题：开发完一段代码后，想看看它的实际效果，我们得build，然后启动服务器，到服务器中去查看；
//自动化打包编译，并运行服务器
gulp.task('serve',['build'],function () {
    $.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.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 把大图生成一系列响应式图片