0
点赞
收藏
分享

微信扫一扫

使用NPM Scripts打造简单的自动化构建工作流

耶也夜 2022-05-23 阅读 53

1、使用NPM Scripts包装构建命令

(1)在package.json中添加“scripts”字段

package.json

"scripts": {
"build":"sass scss/main.scss css/style.css"
},

添加完后完整的是下面这个样子的

使用NPM Scripts打造简单的自动化构建工作流_css使用NPM Scripts打造简单的自动化构建工作流_当前目录_02


{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build":"sass scss/main.scss css/style.css"
},
"devDependencies": {
"sass": "^1.32.8"
}
}


View Code

 (2)通过npm或是yarn启动scripts

yarn build

(3)为项目安装一个browser-sync的模块,用于启动测试服务器,运行项目

yarn add browser-sync --dev

(4)在scripts中添加serve命令,在这个命令当中,通过browser-sync把当前目录运行起来

"serve":"browser-sync ."

添加完后完整的是下面这个样子的

使用NPM Scripts打造简单的自动化构建工作流_css使用NPM Scripts打造简单的自动化构建工作流_当前目录_02


{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css",
"serve":"browser-sync ."
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}


View Code

(5)在命令行运行serve命令

yarn serve

此时browser-sync会自动启动一个web服务器,并且唤起浏览器,运行当前的网页

(6)使用NPM Scripts的钩子机制preserve,可以在serve之前先执行build,这时候先执行serve,它就会自动化的先执行build命令

在scripts中添加preserve 

"preserve":"yarn build",
// 这样就可以在执行serve时,构建sass文件,将scss转css


npm 脚本有pre​post​两个钩子。举例来说,​​build​​​脚本命令的钩子就是​​prebuild​​​和​​postbuild​​。

"prebuild": "echo I run before the build script",
"build": "cross-env NODE_ENV=production webpack",
"postbuild": "echo I run after the build script"

用户执行​​npm run build​​的时候,会自动按照下面的顺序执行。

npm run prebuild && npm run build && npm run postbuild

因此,可以在这两个钩子里面,完成一些准备工作和清理工作。下面是一个例子。

"clean": "rimraf ./dist && mkdir dist",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production webpack"

npm 默认提供下面这些钩子。


  • prepublish,postpublish
  • preinstall,postinstall
  • preuninstall,postuninstall
  • preversion,postversion
  • pretest,posttest
  • prestop,poststop
  • prestart,poststart
  • prerestart,postrestart


自定义的脚本命令也可以加上​​pre​​​和​​post​​​钩子。比如,​​myscript​​​这个脚本命令,也有​​premyscript​​​和​​postmyscript​​​钩子。不过,双重的​​pre​​​和​​post​​​无效,比如​​prepretest​​​和​​postposttest​​是无效的。

npm 提供一个​​npm_lifecycle_event​​​变量,返回当前正在运行的脚本名称,比如​​pretest​​​、​​test​​​、​​posttest​​​等等。所以,可以利用这个变量,在同一个脚本文件里面,为不同的​​npm scripts​​命令编写代码。请看下面的例子。

const TARGET = process.env.npm_lifecycle_event;

if (TARGET === 'test') {
console.log(`Running the test task!`);
}

if (TARGET === 'pretest') {
console.log(`Running the pretest task!`);
}

if (TARGET === 'posttest') {
console.log(`Running the posttest task!`);
}

注意,​​prepublish​​​这个钩子不仅会在​​npm publish​​​命令之前运行,还会在​​npm install​​​(不带任何参数)命令之前运行。这种行为很容易让用户感到困惑,所以 npm 4 引入了一个新的钩子​​prepare​​​,行为等同于​​prepublish​​​,而从 npm 5 开始,​​prepublish​​​将只在​​npm publish​​命令之前运行。


使用NPM Scripts打造简单的自动化构建工作流_css使用NPM Scripts打造简单的自动化构建工作流_当前目录_02


{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"preserve":"yarn build",
"serve":"browser-sync ."
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}


View Code

(7)给sass命令添加--watch参数

"build": "sass scss/main.scss css/style.css --watch",

// 在工作时会监听文件的变化,当代码中的sass文件发生变化,他就会自动被编译

完整版

使用NPM Scripts打造简单的自动化构建工作流_css使用NPM Scripts打造简单的自动化构建工作流_当前目录_02


{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"preserve":"yarn build",
"serve":"browser-sync ."
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}


View Code

(8)同时执行多个任务,借助npm-run-all模块

安装 npm-run-all

yarn add npm-run-all --dev

(9)在scripts中添加start命令

"start": "run-p build serve"

// 可以同时执行build和server命令

完整版

使用NPM Scripts打造简单的自动化构建工作流_css使用NPM Scripts打造简单的自动化构建工作流_当前目录_02


{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"serve":"browser-sync .",
"start": "run-p build serve"
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}


View Code

(10)运行start命令

yarn start

(11)给server添加--files \"css/*.css\"

"serve":"browser-sync . --files \"css/*.css\"",

// 这个参数可以让browser-sync在启动后监听项目下文件的变化
// 文件发生变化后,browser-sync会将这些变化内容自动同步到浏览器,更新浏览器界面,可即时查看最新的界面效果



{
"name": "scss",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"serve":"browser-sync . --files \"css/*.css\"",
"start": "run-p build serve"
},
"devDependencies": {
"browser-sync": "^2.26.14",
"sass": "^1.32.8"
}
}






举报

相关推荐

0 条评论