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

参考链接

相关文章推荐

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

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

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

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

前端构建尝试1-demo网站

  • 2016年10月14日 17:34
  • 1.23MB
  • 下载

npm、grunt、bower实现前端项目自动化

所需的安装指令:modernizr官方网站:https://modernizr.com/ grunt-modernizr网站:https://www.npmjs.com/package/grunt-...

前端框架Vue(12)——如何将 vue-cli 项目打包压缩(npm run build)后放到服务器

当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上。   如果...

npm scripts详解

前言 这个主题之前有分享过的,不过没有今天这么基础,本文由@yangfch3带来的分享,比较偏原理跟实践性。 正文从这开始~ npm 不仅可以用于 模块管理,...

npm scripts 使用指南(阮一峰)

一、什么是 npm 脚本? npm 允许在package.json文件里面,使用scripts字段定义脚本命令。 {  // ...  "scripts": {    "build": "n...

npm scripts 使用指南

作者: 阮一峰 日期: 2016年10月11日http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html Node 开发离不开 npm,而脚...

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

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part2Cory Hou...

前端构建工具、browserify、gulp的组合使用及尝试感言

前言前端的技术发展真的快,好了,废话不多说,先说说使用browserify及gulp配合构建的例子以及个人认为的缺陷。 后面会将这个项目的构建工具以及demo源代码发出来的。。。但是但是但是,bro...
  • cdnight
  • cdnight
  • 2016年10月14日 17:29
  • 1600
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用 npm scripts 来构建前端项目的尝试
举报原因:
原因补充:

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