gulp和webpack初探

2016-07-03 02:41:00

首先声明一下，gulp和webpack两者关系不大，主要是团队之前一直用grunt构建工具，这几天业务上比较清闲，老大让我学学新的gulp和webpack这些“潮流”工具，于是草草研究了一天，记一些笔记。

gulp 真正“流程”化工具

我记得实习刚刚进公司看到grunt，还是有点蒙，之前一直是本地开发，游览器F5，没想到前端也需要“编译工具”。所以grunt一直给我的感觉是“编译工具”，你写的很多代码还不能直接“执行”，需要这一个工具去“编译”才能上线。它去自动化了很多东西，我之后也写过一个公司用的grunt插件，只需要配置，之后加入任务执行，很方便。但当我看到gulp的代码的时候（还没开始看文档，API），我突然意识到很多grunt“不自然”的设计，gulp真正的做到了清晰的流程化的构建。

gulp.task('default', function() {  // 将你的默认的任务代码放在这  gulp.src('client/*.js')  .pipe(replace('bar', 'foo'))  .pipe(minify())  .pipe(gulp.dest('build/'));});

这是我仿照官网写的DEMO，对很多工程师来说pipe这个命名就很清晰了，它就是借鉴了unix的管道概念，前面文件输出给后面文件，这个也就是gulp对比grunt最大的改进，更加简单明了，据说这样也加快速度，还没有在实际项目中运用过，所以没有对比过。不管这种设计的确可以说是grunt的替代品了。
至于插件方面也不用担心，gulp的插件也很强大，基本上项目常用的都有。

webpack 万剑归宗

webpack也很火，它官网的图也介绍了它的作用，所有前端东西都打包成js文件。初学了它，我想它解决的问题就是现在的前端各种各样的“语言”，什么sass呀，coffeescript，还有框架模板，语法糖什么的，各有各的编译工具，而webpack的loader可以通杀，安装好相应的工具，它就可以统统的按你的想法打包在一起。
比如vue，就可以放在单文件里，在团队中做到组件开发，甚至各个人写不同的模板都行。最后使用webpack将各个组件打包在一起。
webpack的配置文件：

var path = require("path");module.exports = {    entry: './static/entry.js', //演示单入口文件    output: {        path: path.join(__dirname, 'out'),  //打包输出的路径        filename: 'bundle.js',              //打包后的名字        publicPath: "./static/out/"                //html引用路径，在这里是本地地址。    },    // 新添加的module属性    module: {        loaders: [      // 解析.vue文件            { test: /\.vue$/, loader: 'vue' },        // 转化ES6的语法            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },        // 编译css并自动添加css前缀            { test: /\.css$/, loader: 'style!css!autoprefixer'},        //.scss 文件想要编译，scss就需要这些东西！来编译处理        //install css-loader style-loader sass-loader node-sass --save-dev            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},        // 图片转化，小于8K自动转化为base64的编码            { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},        //html模板编译？            { test: /\.(html|tpl)$/, loader: 'html-loader' },        ]    },    // .vue的配置。需要单独出来配置    vue: {        loaders: {            css: 'style!css!autoprefixer',            html:'html-loader'        }    },};

webpack可能对于单页应用的开发和管理很有帮助，对于简单的html的开发，gulp就已经绰绰有余了。

关键字：JavaScript, grunt, gulp, webpack

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！