使用NPM Scripts包装构建命令

时间:2021-02-23
本文章向大家介绍使用NPM Scripts包装构建命令,主要包括使用NPM Scripts包装构建命令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

NPM Scripts是实现自动化构建工作流的最简方式

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

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

package.json

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

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

{
  "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 ."

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

{
  "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

完整版

{
  "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文件发生变化,他就会自动被编译

完整版

{
  "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命令

完整版

{
  "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"
  }
}

原文地址:https://www.cnblogs.com/phantomyy/p/14435260.html