长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

npm scripts助力前端开发

  • 时间:2016-10-25 18:01
  • 发布:长沙web培训
  • 来源:web教程

长沙Web前端培训机构的老师今天讲npm scripts助力前端开发,实时刷新浏览器。

用browser-sync或者lite-server来监控文件的改变,当文件改变时,就自动刷新浏览器。

用node-sass来实时编译scss文件。

用parallelshell来异步执行npm script命令。

先安装上述的node工具

npm install browser-sync

一、首先新建npm的package.json

package.json一般有如下的结构和选项

{

"name": "about",

"version": "1.0.0",

"scripts": {

},

"devDependencies":{

}

}

devDependencies代表依赖的node工具,scripts代表npm scripts命令。

"scripts": {

"scss": "node-sass -w scss -o css",

"serve": "browser-sync start --server --files \"css/*.css, *.html\"",

"dev": "parallelshell \"npm run serve\" \"npm run scss\""

}

二、运行npm script命令

> npm run dev

npm run serve利用node-sass监控scss文件夹中.scss、.sass文件的变化,当这类文件有变化时,就编译到css文件夹中。

npm run serve利用browser-sync监控.css文件,.html文件,当这类文件有变化时,就自动刷新浏览器。

三、还可以运行更多的npm scripts命令

例如利用typescript编译.ts文件。

长沙Web前端培训机构的老师下一期还有新的知识点。

上一篇:JavaScript中一些概念
下一篇:padding/border与width的关系

马上预约三天免费体验课

姓名:

电话:

javascrip的数据类型和变量

ajax前后端数据交互

javascipt的函数表达式

菜单展开关闭

选择城市和中心
贵州省

广西省

海南省