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

2022-05-21 18:03:17 阅读：201 来源： 互联网

标签：NPM scss Scripts sync npm build 自动化 css browser

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

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命令之前运行。

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

标签：NPM,scss,Scripts,sync,npm,build,自动化,css,browser
来源： https://www.cnblogs.com/axl234/p/16295610.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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