• 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就已经绰绰有余了。

  • 相关阅读:
    如何知道交换机的某port接入端的IP地址
    列举系统安装的所有可用的数据库提供程序
    重建需要为人民服务
    示例DataSet的构成组件,手工打造DataSet
    2009年7月31日笔记本又换了 thinkpad w500rq3
    Python体验(04)字典dictionary
    la la love on my mind
    类的继承和封装
    Oracle10gR2在Ubuntu10.10下的安装配置及链接测试
    大容量数据传输UI无响应怎么办:异步查询大结果集!
  • 原文地址:https://www.cnblogs.com/kt520/p/5687817.html
Copyright © 2020-2023  润新知