自动化构建学习 -(个人学习)

71 阅读1分钟

NPM Scripts

sass 测试样式工具+

安装sass

npm install sass --dev

yarn add sass --dev
  • 目录
    • node_modules
      • sass
      • sass.cmd

使用

方法一

.\node_modules\.bin\sass    输入路径     输出路径
.\node_modules\.bin\sass scss/main.scss css/style.css

  • 缺点: 重复去输入复杂的命令,而且别人接手项目之后也不知道改如何运行项目

方法二

  • 在node项目中 script 会自动找到node_modules目录下的命令 所以不需要写完整的路径,只需要学命令名称即可

  • --watch 在后面添加 可以监听修改的scss文件后自动编译

package.json

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

命令行

npm run build

yarn build

BrowserSync 浏览器同步工具

  • --files "文件夹/文件名" 在后面添加 可以监视的文件路径 (css/*.css)

安装BrowserSync

官方开发文档

npm install browser-sync --dev

yarn add browser-sync --dev

package.json

"scripts": {
    "build": "sass scss/main.scss css/style.css",
    // "serve": "browser-sync 要执行的文件或目录" (  . 执行的是根目录)
    "serve": "browser-sync .",
},

命令行

npm run serve

yarn serve

npm-run-all 用于并行或顺序运行多个 npm 脚本的 CLI 工具。

官方开发文档

速记命令

  • run-s 用于顺序 (执行上一个任务之后在执行下一个任务)
  • run-p 用于并行 (同时执行任务)

安装npm-run-all

npm install npm-run-all --dev

yarn add npm-run-all --dev

package.json

"scripts": {
    "build": "sass scss/main.scss css/style.css",
    "serve": "browser-sync .",
    // "start": "并行命令 build serve"
    "start": "run-p build serve"
},

命令行

npm run start

yarn start

Gulp 自动化构建工具

官方开发文档

安装 gulp 命令行工具

npm install gulp --dev

yarn add gulp --dev

创建 gulpfile.js 文件

exports.default = done => {
    console.log('执行默认任务');
    done();
}


exports.bar = done => {
    console.log('执行bar任务');
    done();
}

执行 gulp 命令

npm gulp     // 执行默认任务
npm gulp bar // 执行bar任务

yarn gulp     // 执行默认任务
yarn gulp bar // 执行bar任务