专栏首页九彩拼盘的叨叨叨用 npm scripts 来构建前端项目的尝试

用 npm scripts 来构建前端项目的尝试

最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后,觉的这文章写的相当不错,就决定尝试下。

下面先简单介绍下 npm Scripts。

什么是 npm Scripts

Node.js 项目下一般都有一个 package.json 文件,文件的内容类似这样:

{
  "name": "node-js-sample",
  "version": "0.2.0",
  "description": "A sample Node.js app using Express 4",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.13.3"
  },
  "engines": {
    "node": "4.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/heroku/node-js-sample"
  },
  "keywords": [
    "node",
    "heroku",
    "express"
  ],
  "author": "Mark Pundsack",
  "contributors": [
    "Zeke Sikelianos <zeke@sikelianos.com> (http://zeke.sikelianos.com)"
  ],
  "license": "MIT"
}

其中,

"scripts": {
  "start": "node index.js"
}

即为 npm Scripts。

npm Scripts 是用定义来一些任务的。我们在命令行中执行 npm run 任务名,即可执行这个命令。如,在上面的例子中,如果在命令行中执行

npm run start

即会执行 start 对应的 node index.js.

用 npm Scripts 的优势

npm Scripts 中的任务可以调用命令行中的 API。换种说法,所有能在命令行中用的命令都可以在 npm Scripts 中用。是不是有点小激动~

例如,删除某个文件夹下的所有文件,可以这么写

"scripts": {
  "remove": "rm -rf 文件夹路径"
}

其中, rm -rf 文件夹路径 为 Unix/linux 下命令行中删除文件夹的命令。当然 Windows 并不支持该命令。要做到跨平台。可以用第三包rimraf。在你全局安装了 rimraf(npm -g i rimraf)后,配置

"scripts": {
  "remove": "rm -rf 文件夹路径"
}

执行 npm run remove 就能做到在不同平台都能删除文件夹。

如用用 Gulp 来做同样的事,就只能找 Gulp 的插件来做了(Grunt 也一样)。

进入正题

我做了一个前端脚手架项目:front-end-scaffold(还处于 Alpha 状态)。下面具体介绍,用 npm Scripts 来构建该项目。

开发阶段

主要做这几件事:

  • 启动静态服务器来查看做好的页面。用 Nodejs 的包 anywhere。之所以用静态服务器而不是直接在文件中打开 .html 文件的原因是:在文件中打开,页面的协议是 file://,如果该页面会在 JS 中加载一些资源或模拟 aJax 接口,其协议是 http:// ,因为协议不同(跨域)而加载失败。用静态服务器不会产生这个问题。
  • 监视 Sass 文件的变化。变化时,编译生成 CSS 以及 sourcemap。用 Compass。
  • 监视 ES6 文件的变化。变化时,编译生成 ES5 的 JS 以及 sourcemap。用 Webpack 和 Babel。

在 package.json 的配置如下

"scripts": {
  // 开发时所有要做的
  "start": "node_modules/.bin/npm-run-all --parallel start:server watch:sass watch:es6",
  "watch:sass": "compass watch",// 监视 Sass 文件的变化
  "watch:es6": "node_modules/.bin/webpack --watch -d",// 监视 ES6 文件的变化
  "start:server": "node_modules/.bin/anywhere 1520 -d src"// 启动静态服务器
}

开发时只需执行

npm run start

其中 Compass 需要先安装。其他即几个在安装该项目的依赖时被安装

"devDependencies": {
    "npm-run-all": "1.6.0",
    "webpack": "1.12.14",
    "anywhere": "1.2.0"
}

发布时

主要做这几件事:

  • 删除发布文件目录。用 Nodejs 的包 rimraf。
  • 将 ES6 代码编译成 ES5 代码,合并(如果有需要的话),并压缩。用 Webpack + Babel。
  • 将 Sass 代码编译成 CSS 代码,并压缩。用 Compass。
  • 将 源代码目录下的除了 ES6 和 Sass 代码外的其他代码都移动到发布文件目录下。用 Gulp。用 Gulp 是为了跨平台,如果不要跨平台,可以用当前平台的命令行的命令来做移动目录会更简单。

在 package.json 的配置如下

"scripts": {
  "prebuild": "npm run remove-dist", // 执行 npm run build 前会自动执行的任务
  // 发布时所有要做的
  "build": "npm run build:css && npm run build:js && npm run moveAssets",
  "build:js": "node_modules/.bin/webpack -p", // 将 ES6 代码编译成 ES5 代码,合并(如果有需要的话),并压缩。
  "build:css": "compass compile",
  "moveAssets": "node_modules/.bin/gulp",// 将 源代码目录下的除了 ES6 和 Sass 代码外的其他代码都移动到发布文件目录下。
  "remove-dist": "node_modules/.bin/rimraf ./dist"// 删除发布文件目录。
}

发布时只需执行

npm run build

Happy Coding~

ps: 最近刚拿到 «程序员健康指南» ,就有点扁桃体发炎,是要我赶快看那书的节奏么~ 大家也要注意身体那。

参考链接


本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 佛祖保佑,永无bug(仅供娱乐)

    有了它,bug消失了,睡的也香了,哈哈哈~还有,该插件目前只能保佑js文件。如果要保佑其他格式的文件,只需修改其 config.json即可。

    Joel
  • 学习概要:前端该会的 Photoshop 使用

    Joel
  • 前端学习资源精选

    看视频学技术的缺点是学习效率比较低,优点是对初学者更友好。前端入门后,不推荐看视频。

    Joel
  • 2018-08-16 好漂亮的后台模板附教程vue-element-adminvue-element-admin

    vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路...

    Albert陈凯
  • NPM怎么玩?

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

    城市中的游牧民族
  • package.json

    每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm i...

    奋飛
  • Git 居然可以用来跟女神聊天?

    Git 是用来做啥的?想必码农朋友都知道,Git 是版本控制软件,是软件开发过程中团队协作不可或缺的软件。

    谭庆波
  • 用 Git 做这事,脑洞真大

    Git 是用来做啥的?想必码农朋友都知道,Git 是版本控制软件,是软件开发过程中团队协作不可或缺的软件。

    佛系编程人
  • node.js 学习笔记

    node.js学习笔记 最近一直在折腾前端,为了方便前端学习,所以打算顺带捡一下之前看过一点的node.js,也就顺手MarkDown一个学习笔记。 no...

    李郑
  • 【Node.js】Node.js安装及环境配置

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量...

    魏晓蕾

扫码关注云+社区

领取腾讯云代金券