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

转载 2016年05月31日 22:57:33

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

2016-04-02 23:20:121341浏览2评论

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

参考链接

Myeclipse中导入Android项目时,提示的错误:由于项目的构建路径不完整,所以未构建该项目。

在Myeclipse中将一个Android程序代码引入到项目中时,在构建项目过程中提示的错误: 1 由于项目的构建路径不完整,所以未构建该项目。找不到 java.lang.Object 的类文件。修...
  • u010919530
  • u010919530
  • 2013年07月22日 11:01
  • 4136

javascript 前端 基于 npm、bower、grunt的标准项目构建

本文不是npm、bower、grunt的初级入门教程,而是希望给一个非常合适团队使用的模板,而不熟悉该部分内容的团队成员可以边开发、边应用、边理解,节约时间的同时还能更专注于具体业务。...
  • cz_jjq
  • cz_jjq
  • 2015年12月25日 15:44
  • 2393

我为何放弃Gulp与Grunt,转投npm scripts(下)

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/earlgrey-ios-functional-ui-testCory ...
  • ricohzhanglong
  • ricohzhanglong
  • 2016年02月23日 21:50
  • 4679

使用命令创建vue.js项目

前序:开发vue项目需要借助node环境,进行以下步骤时,要先装好node环境。 推荐使用淘宝镜像安装,速度比较快,可安装在c盘,命令是: npm install -g cnpm --regist...
  • xiejunna
  • xiejunna
  • 2016年12月31日 16:31
  • 1537

Maven项目对象模型(POM)

官方网站地址: http://mvnrepository.com/ Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具...
  • hanfengzqh
  • hanfengzqh
  • 2017年01月06日 11:29
  • 304

npm run 执行多任务的package.json配置

先将任务分解成多条分支任务,然后将这些分支任务用&&串联成一条总任务来执行: "build": "npm run build-js && npm run build-css", 再用npm run ...
  • johnsuna
  • johnsuna
  • 2016年06月02日 15:00
  • 16741

使用NPM + Webpack进行前端开发的示例

最近在使用Webpack来帮助进行前端开发,觉得这个东西的确挺好用。所以用一个简单的示例记录一下,供他人以及自己以后的参考。 这篇文章不是Webpack的教程贴,也不分析Webpack的优缺点,只是简...
  • u012422829
  • u012422829
  • 2016年08月21日 21:42
  • 11657

用TeamCity实现npm项目的自动部署

TeamCity是Jetbrains的持续集成工具,免费使用的话可以设置20个构建脚本,对于我们个人来说基本上是够用了。当然假如以后超过限制了,可以考虑使用另一个著名的持续集成工具Jenkins。当然...
  • u011054333
  • u011054333
  • 2017年11月02日 05:25
  • 243

SSH项目开发里用maven的好处

maven是一个很好用的构建工具。 推荐maven学习的书籍: 《Maven实战》(国内首本Maven著作)(Maven的安装、配置及使用入门) 在SSH开发里使用maven继续构建的好...
  • u014427391
  • u014427391
  • 2016年02月02日 00:38
  • 2436

创建play framework2项目的方法

方法一、用activator命令创建一个新应用程序$ activator new my-first-play play-java方法二、用Activator UI创建一个新应用程序也可以使用Activ...
  • u013066244
  • u013066244
  • 2016年12月21日 23:07
  • 1252
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用 npm scripts 来构建前端项目的尝试
举报原因:
原因补充:

(最多只允许输入30个字)