脚手架搭建流程小结

1.为什么会有这个文章

前端工具的演化，可以说应接不暇。我在具体业务实践中，尝试和接触过grunt，fis，glup等脚手架的流程。在应用这些工具的过程中，对开发流程模棱两可，虽说是简单的打包，转译，压缩，混淆等等，但具体实现起来，怎么优化等等甚至路径的配置等等，都需要实践才能领会。学习操作系统最好的方式就是做系统，那么学习脚手架的流程，最好的方式也应该如此。首先需要梳理一下前端开发常见的工作流：

一般的前端在开发过程中常用的资源只有HTML，CSS，JS和一些图片资源，可能会存在少量的音频甚至视频资源。对于这些，我们早已不是直接在编写HTML和CSS文件了。HTML可以用插件生成，CSS可能会遇到预编译工具，常见如LESS，SASS，JS使用方式更多样，有适用于大型系统的超集JS：TypeScript，也有可以转义ES6的Babel，如果使用了某种MVVM模式的框架，如react,vue，其中丰富的JSX语法和组建的概念，使得前端的开发流程大放异彩的同时，也提升了可维护性。在webpack作为前端脚手架的灵魂般存在的同时，我们在不同的阶段：开发，部署，上线都有着不同的需求，这其中必然要使用不一样的插件，脚本去实现目的。

2.如何实现

这是packjson.json的配置

{
  "name": "toddmark",
  "version": "1.0.0",
  "description": "build a custiom blod ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf build && webpack",
    "release": "git add . && git commit -m \"/****** release ******/\" && git push ",
    "dev": "cross-env NODE_ENV=development node dev-server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/toddmark/toddmark.git"
  },
  "author": "Todd Mark",
  "license": "ISC",
  "bugs": {
    "url":