sass、babel

src 源代码 dist 翻译后的代码 vendors 第三方 node_models第三方包

HTML

*.html 当前目录下的所有.html文件
rm -rf *.css 彻底移出所有.css文件
src中的文件都要经过翻译或复制(.html)到 dist中
安装watch-cli自动copy更新的html文件
watch -p "src/index.html" -c "cp src/index.html dist/index.html"

CSS自动化

sass命令行相关
安装
sudo npm install node-sass --unsafe-perm -g
翻译
mv style.css style.scss //将后缀改成.scss
node-sass style.scss main.css 将.scss翻译成.css
用scss语法改写scss文件后要执行翻译语句才有效
可监听scss文件实现自动翻译

node-sass style.scss main.css -w style.scss
node-sass src/css/ -o dist/css/ -w

JS自动化

babel is a JS compiler
翻译成兼容ie的代码

image.png

执行npm run build时就是执行 "build": "babel src -d lib"
由于babel是局部安装的，在node_modules/.bin./babel，使用时需要带上路径
node_modules/.bin./babel src -d lib //将src中的js文件翻译放入lib
-d destination -o output
页面引用的是lib目录下的js

image.png

每次修改需要翻译一次，可使用--watch自动更新
node_modules/.bin./babel src -d lib --watch

全局安装和项目安装的区别：
1.npm install xx -g //全局安装
在user/local/bin全局目录
全局安装的命令行可直接使用
user/local/bin包含在PATH 可查看）
2.不带-g
当前目录下的node_modules/.bin/
使用时要带上路径
e.g：
启动node_modules/.bin/中的http-server
./node_modules/.bin/http-server -c-1

全局安装卸载时也要带-g
*.html 当前目录下的所有.html文件