前端自动化构建工具

1、Node.js

node

npm

2、cnpm   淘宝镜像安装

$ npm install -g cnpm –registry=https://registry.npm.taobao.org

npm init 初始化环境

3、babel

Babel 入门教程 ES6转码器

命令行:
cnpm install babel-cli -g / cnpm install –global babel-cli (全局安装)

cnpm install babel-cli –save-dev 本地安装(生成依赖 npm install一键完成依赖安装)

cnpm install –save-dev babel-preset-es2015 -g (全局安装)

cnpm install –save-dev babel-preset-es2015 (本地安装)

4、 browser-sync 省时的浏览器同步测试工具

BrowserSync 迅捷从免F5开始

cnpm install -g browser-sync (全局安装)

cnpm install –save-dev browser-sync (本地安装)

5、commonjs(同步加载)

amd(异步加载) cmd (异步加载 按需)

6、browserify (打包js)

npm install -g browserify

7、less打包css

npm install -g less
lessc index.less index.css 编译命令
若要输出压缩过的 CSS,只需添加

-x

选项。如果希望获得更好的压缩效果,还可以通过

--clean-css

选项启用 Clean CSS 进行压缩。

8、jscss压缩

npm install less less-plugin-clean-css -g 安装less下的css压缩插件

 lessc index.less > index.css --clean-css="advannced" 编译同时进行css压缩
npm install uglifyjs -g  安装js压缩工具

用browserify打包后的文件进行压缩  

uglifyjs index.js -o index.min.js  压缩js命令

uglifyjs index.js -m -o index.min.js

9、图片压缩

npm install -g node-smushit 共后端使用的图片压缩前端压缩不明显 smushit img 收费图片压缩:https://tinypng.com/ 安装tinify https://www.npmjs.com/package/tinify

 
base64  图片压缩

npm install base64-css 本地环境下的安装
node bin/cli.js -f ./test/lib.css  本地环境下执行node+

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注