NPM Scripts
sass 测试样式工具+
安装sass
npm install sass --dev
yarn add sass --dev
- 目录
- node_modules
- sass
- sass.cmd
- node_modules
使用
方法一
.\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任务