gulp和webpack初探

起首声明一下,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就已绰绰有余了。

    原文作者:kaiten
    原文地址: https://segmentfault.com/a/1190000005855715
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞