web tools

  • 虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了。因此,我写了这个比较简单的构建方案。本文基于 gulp 最新的 4.0.2 版本进行了修改。现在前端组件化项目大多是基于 webpack 进行构建,但是有一个零散的小业务,静态页面之类的,使用 gulp 反而会更加简单方便。

    如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件

    这个方案主要是为了实现es6转es5、js/css的压缩合并、自动添加版本号和压缩html。

    • gulp-babel es6转es5
    • gulp-csso 压缩优化css
    • gulp-uglify
  • gulp的官方定义非常简洁: 基于文件流的构建系统 。通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

    匹配符 *、**、!、{}

    src('./js/*.js')               // * 匹配js文件夹下所有.js格式的文件
    src('./js/**/*.js')            // ** 匹配js文件夹的0个或多个子文件夹
    src(['./js/*.js','!./js/index.js'])    // ! 
  • 前言

    最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了。在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间。所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间。那么要怎么去实现呢?

    解决方案

    DllPlugin 和 DllReferencePlugin

    查找了一下资料,发现我们可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实

  • 前言

    Parcel 是什么

    Parcel 是一个前端构建工具,Parcel 官网 将它定义为极速零配置的Web应用打包工具。没错,又是一个构建工具,你一定会想,为什么前端的构建工具层出不穷,搞那么多工具又要花时间去学习,真的有意义吗?在 webpack 已经成为前端构建工具主流的今天,一个新的工具能有什么优势来站稳脚跟呢?

    为什么要用 Parcel

    一个好的打包工具在前端工程中占着比较重要的地位。然,何谓之好?或功能强大,或简单易用,或提高效率,或适合自己。在时代不断发展中,一个个好的工具正在被一个更好的工具所替代。随着对 webpack 复杂配置的吐槽声越来越多,Parcel 打着 "快速、

  • 前言

    像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目。在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率。

    为什么需要需要脚手架?

    • 减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件。
    • 根据交互动态生成项目结构和配置文件等。
    • 多人协作更为方便,不需要把文件传来传去。

    思路

    要开发脚手架,首先要理清思路,脚手架是如何工作的?我们可以借鉴 vue-cli 的基本思路。vue-cli 是将项目模板放在 git 上,运行的