NPM Scripts -- onchange parallelshell
- Watch for changes to the styles.scss file and automatically compile it to the css file.
- Run multiple NPM scripts in parallel using parallelshell NPM module.
Watching for Changes and Parallelshell
- First, we install two NPM packages onchange and parallelshell as follows:
npm install --save-dev onchange@3.3.0 parallelshell@3.0.2
- Then, add the following two script items to package.json if you are doing the exercise on a MacOS computer or a Linux computer:
"watch:scss": "onchange \"css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\""
NPM Scripts Part 1
Objectives and Outcomes
In this exercise, you will learn to set up NPM scripts by modifying the package.json file. At the end of this exercise, you will be able to:
- Watch for changes to the styles.scss file and automatically compile it to the css file.
- Run multiple NPM scripts in parallel using parallelshell NPM module.
Moving JS to Script file
- Create a folder named js and in that folder create a file named scripts.js.
- Open index.html and from this file cut out all the JQuery script that we added to it and move the code to the scripts.jsfile that we created above.
- Then, update the index.html file to include the scripts.js file by adding the following line:
- Add the same line to the scripts block in aboutus.html and contactus.html:
Watching for Changes and Parallelshell
- First, we install two NPM packages onchange and parallelshell as follows:
- Then, add the following two script items to package.json if you are doing the exercise on a MacOS computer or a Linux computer:
- NOTE: If you are doing the exercise on a Windows computer, please use the following two script items instead of the above:
- You will also update the start script as follows:
- Then, type the following at the prompt to start watching for changes to the SCSS file, compile it to CSS, and run the server:
NPM Scripts -- onchange parallelshell的更多相关文章
- NPM Scripts 2 -- rimraf copyfiles imagemin usemin htmlmin uglifyjs
NPM Scripts Part 2 Objectives and Outcomes In this exercise you will learn to build a distribution f ...
- [NPM] Run npm scripts when files change with onchange
In this lesson we will look at how we can setup our npm scripts to execute when the file system has ...
- npm Scripts使用教程【译】
Why npm Scripts? 原文发表于 2016.2.12,原文地址: https://css-tricks.com/why-npm-scripts/ 以下是访客Damon Bauer发布的一篇 ...
- npm scripts 助力前端开发,实时刷新浏览器
用browser-sync或者lite-server来监控文件的改变,当文件改变时,就自动刷新浏览器. 用node-sass来实时编译scss文件. 用parallelshell来异步执行npm sc ...
- npm scripts + webpack 实践经验(React、Nodejs)
最近用Webpack+npm scripts+Mongodb+Nodejs+React写了个后台项目,在用Webpack构建过程中遇到了许多坑,就写出来分享一下. 构建工具五花八门,想当年刚学会Gru ...
- [NPM] Pull out npm scripts into another file with p-s
A technique you might use once you start having lots of npm scripts is to use a node package that al ...
- [NPM] Make npm scripts cross-environment friendly
Unfortunately not all shell commands work across various environments. Two main techniques to suppor ...
- windows下npm scripts不能执行的问题
最近在学webpack为了方便把运行脚本写入package.json文件中,如下: "scripts": { "start": "webpack-de ...
- 5.npm scripts 使用指南
简单介绍 scripts里面的 "start": "node app" npm run start 相当于 node app { "name" ...
随机推荐
- Linux下的物理内存管理2-slab缓存的管理
2017-03-02 在Linux下的物理内存管理中,对SLAB机制大致做了介绍,对SLAB管理结构对象也做了介绍,但是对于小内存块的分配没有介绍,本节重点介绍下slab对小内存块的管理. 内核中使用 ...
- 【开发者笔记】冒泡排序过程呈现之java内置GUI表示
自己玩玩写写,排序的过程多么有趣,特别是把看着电脑吧一堆乱七八糟的数据排成有序组合的时候,看起来贼舒服,特别是强迫症患者.好了,话不多说上代码,也算是自己记录一下吧,没有什么技术含量但个人感觉比较有趣 ...
- TensorFlow学习笔记(三)-- feed_dict 使用
个人理解:就是TF的一种输入语法. 跟C语言的scanf(),C++的 cin>> 意思差不多,只是长相奇怪了点而已. 做完下面几个例子,基本也就适应了. 首先占位符申请空间:使用的时候, ...
- docker——数据管理
生产环境中使用docker的过程中,往往需要对数据进行持久化,或者需要在多个容器之间进行数据共享.容器中管理数据主要有两种方式: 数据卷(Date Volumes):容器内数据直接映射到本地环境 数据 ...
- python介绍和基础(待补充)
python的介绍 把命令放到一个文件中,文件还能执行,这样的语言叫shell脚本 写一个c语言程序,.c结尾的,gcc运行c语言程序,生成.out文件,然后执行.out文件 c语言是先编写代码,再编 ...
- PKU 1201 Intervals(差分约束系统+Spfa)
题目大意:原题链接 构造一个集合,这个集合内的数字满足所给的n个条件,每个条件都是指在区间[a,b]内至少有c个数在集合内.问集合最少包含多少个点.即求至少有多少个元素在区间[a,b]内. 解题思路: ...
- display、box-sizing,position有哪些值?
display有哪些值? none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline- ...
- Codeforces Round #431 (Div. 2) C. From Y to Y
题目: C. From Y to Y time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- selenium+python学习总结
学习了一个月的selenium+python,终于学有所成,下面以一个简单的项目来总结学习所得. 1. 项目结构 在项目结构中,大家要注意到:每一个源文件夹中都要有一个__init__ ...
- WPS宏不可用解决方法
在使用WPS Office过程中,遇见宏不可用,在启用宏的过程中提示获取VBA插件 解决方法: 1.下载VBA插件,下载地址:https://pan.baidu.com/s/1LqBmXw37U0km ...