什么是工程化
：自动化、模块化、性能优化
scss → sassy css
先玩一下scss （ruby社区发明的）
搜node scss github
也可用yarn
加-g表示全局安装，在哪里都可以使用
用npm安装时，基本上会失败，搜node sass 安装失败
https://github.com/lmk123/blog/issues/28
这个可以解决，
如果安装成功了测试下
测试失败，结果为安装失败
换一种，用yarn来下载
直接改项目里的a.css的后缀为a.scss
scss完全兼容css语法
把a.scss翻译成a.css
学习下scss
里面可以进行嵌套
比如
.topNavBar nav {
padding-top: 4px;
padding-bottom: 3px;
}
可以写成
.topNavBar{
nav {
padding-top: 4px;
padding-bottom: 3px;
}
}
修改完之后再翻译下
sass和scss有什么区别？
前端太low
ruby社区发明了sass，比如
翻译一下就是
再比如
前端说看不懂，ruby于是又发明了一套scss，比如加括号、加分号
html里直接引用.scss可以不？不行，因为浏览器不认识，只认识.css
那每次在.sass里修改了之后，都需要翻译下，那能不能自动翻译呢？
语法
IE不知let
需要一个工具自动的让let变成IE支持的var
这种工具叫做babel
需要一个package.json
用npm init来实现一个合法的package.json
然后
这个时候package.json里就多了一句
第3步，
在package.json的scripts里加"build": "babel src -d lib"
执行之后会报错，我们执行npm run build的时候，其实是在执行"build": "babel src -d lib"这段代码
全局安装和项目安装的区别
新建一个目录
安装在上面的目录了
没有-g就是安装在当前目录
把全局安装删掉
使用局部http-server
因为babel是局部安装的，所以运行命令时，要把路径补全
这里src是个目录，表示把src目录里的js全部翻译成IE可以用的js
把生成的代码都放到目标路径lib里面
这里我们改下路径
lib目录下的message.js里的let就被换成了var
命令里的-d就是desdination，目的地
这个时候把index.html里的js代码路径改下
如果js里的js有修改，怎么办？需要自动翻译成dist里的js才是我们需要的
后面加个--watch
问题：要多开一个进程，监视文件的改动
前端有没有目录规范？
src：未经翻译的代码
dist：待发布的代码
vendors：第三方库放的地方
node_modules：第三方包
翻译并监听
o是output的意思
js进行翻译并监听
接下里问题：dist里没有html的
即如何监听html，并且观察到其变更后，自动拷贝到dist目录下
所有的文件都需要从src拷到dist下
搜watch cli
安装
接下来监控图片
监控js
监控css
监控html
以上很麻烦（就是用翻译工具把CSS（各种sass、css、Less等）和js（各种es5、es6）等翻译为IE能运行的代码）
以及比如在dist/目录下的index.html的css路径希望自动能加入版本号，一旦改了css，希望能自动的修改版本号
有没有其他工具能代替这些窗口监控？一开始是Grunt、然后是Gulp、然后是webpack
https://github.com/webpack/webpack
先把package.json里的依赖删掉
也可以直接删掉，然后重新npm init
然后
安装完之后，就多了个依赖
更多配置文件及内容请进入https://github.com/tsl1127/resume_webpack
