> 脚本语言 > >

基于npm scripts的前端构建工具 2017-02-10 15:38　出处：清屏网　人气：　

在前端开发工作中，为了避免重复的工作，我们通常会借助一些任务运行器去完成常见的前端任务，例如文件合并，脚本压缩，生成sprite图。世面上有很多这样的工具，比较成熟的有 grunt ， gulp ， webpack ， shell ， ant 。使用这些工具可以大大的提高我们的日常产出，让我们把开发的重心放在项目本身的业务上，而不必在常见任务上浪费过多的时间。我们不去讨论这些工具之间的优势和差异，一千个读者就有一千个哈姆雷特。在工作中，我使用过的前端任务工具包括但不限于 grunt ， gulp ，他们的确给我带来了很多的帮助，当我发现 npm scripts 命令就能很好的完成这些任务时，我不得不跟他们告别。相较于 grunt 和 gulp ， npm scripts 具有更大的优势，使用 npm scripts 执行构建自动化是一种更简单的方式。

问题

对插件作者的依赖

令人沮丧的调试

过时的文档

为何会忽略掉 npm scripts

认为 npm scripts 需要强大的命令行技巧

认为 npm scripts 不够强大

认为 Gulp 的流对于快速构建来说是不可或缺的

认为 npm scripts 无法实现跨平台运行

npm scripts

npm 会在项目的 package.json 文件中寻找 scripts 区域，其中包括 npm test 和 npm start 等命令。事实上， npm test 和 npm start 是 npm run test 和 npm run start 的简写，你可以使用 npm run 来运行 scripts 里的任何条目。

使用 npm run 的方便之处在于， npm 会自动把 node_modules/.bin 加入 $PATH ，当脚本内容结束，则子shell关闭，回到父shell中，这样你可以直接运行依赖和开发依赖程序，不需要全局安装了，只要 npm 上的包提供命令行接口，你就可以直接使用它们。

常见任务 package.json 模板 {   "name": "npm-scripts-boilerplate",   "version": "1.0.0",   "scripts": {     ...   },   "devDependencies": {     ...   } }

我们的构建脚本命令放在 scripts 对象里，对于想使用的工具依赖库都放在 devDependencies 对象里。

项目结构 ├── CHANGELOG.md ├── README.md ├── build │  ├── images │  │  └── sprites.png │  └── js │      ├── bundle.js │      └── bundle.min.js ├── docs ├── package.json ├── src │  ├── config.rb │  ├── css │  │  ├── main.css │  │  ├── main.css.map │  │  └── spirtes.css │  ├── images │  │  ├── icons │  │  └── sprites.png │  ├── index.html │  ├── js │  │  └── app.js │  ├── media │  └── sass │      ├── _landscape.scss │      ├── _mediaquery.scss │      ├── _mixins.scss │      ├── _normalize.scss │      ├── _utilities.scss │      ├── _variables.scss │      ├── main.scss │      └── mixins ├── test 编译 SCSS

将 scss 编译为 css ，使用 node-sass .

安装 node-sass

命令行输入：

npm install --save-dev node-sass 或者 npm install -D node-sass

命令行脚本

安装完成后，我们可以使用 node-sass 工具来构建我的任务： node-sass --output-style compressed -o dist/css src/sass
上面的命令行功能比较容易理解，就是 src/sass 下的 *scss 文件编译成 css 文件，并输出到 dist/css 目录下，文件内容的输出风格为 compressed ，输出风格可以任意选择，可以使用 node-sass help 查看帮助。

写入 package.json 的 scripts 对象里

把上面的代码放到 package.json 文件里， package.json 的内容变成：

package.json

"scripts": {   "scss": "node-sass --output-style compressed -o dist/css src/sass" }

运行任务

npm run scss

使用 PostCSS 自动补全 CSS 浏览器厂商前缀

用到的库 postcss-cli ，

安装 postcss-cli , autoprefixer

npm install -D postcss-cli autoprefixer

写入 package.json 的 scripts 对象里

package.json

"scripts": {   ...   "autoprefixer": "postcss -u autoprefixer -r dist/css/*" }

可以通过设置 autoprefixer 的相关参数来改变 autoprefixer 默认浏览器支持。

校验 javascript eslint" class="reference-link">安装 eslint

npm i -D eslint 或者使用 npm install --save-dev eslint ，前者是后者的简写方式。

运行命令，初始化一些 hint 的基本规则

eslint --init

写入 package.json 的 scripts 对象里

package.json

"scripts": {   ...   "lint": "eslint src/js" }

运行任务

npm run lint

压缩/混淆 javascript

依赖库 uglify-js

npm i -D uglify-js

写入 package.json 的 scripts 对象里

package.json

"scripts": {   ...   "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js" }

运行任务

npm run uglify

压缩图片

依赖库 imagemin-cli

npm i -D imagemin-cli

写入 package.json 的 scripts 对象里

package.json

"scripts": {   ...   "imagemin": "imagemin src/images dist/images -p", }

运行任务

npm run imagemin

开启http静态服务器

依赖库 BrowserSync

npm i -D browser-sync

写入 package.json 的 scripts 对象里

package.json

"scripts": {   ...   "serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'" }

监听css和javascript的改变

依赖库： onchange

npm i -D onchange

写入 package.json 的 scripts 对象里