前端开发使用的脚手架——npm或gulp

最近做了几个静态html页的前端开发，不停的刷新。
手腕、手指实在是受不了，就研究了两个脚手架，一个用npm scripts实现，一个用gulp实现。以后就可以只管修改，查看，不用手动刷新了。
并且可以自动将less或sass编译成css，将js进行压缩。

•  npm scripts实现

安装

npm install

使用

npm run build

启动 http://localhost:3000/ 端口的服务器，运行的是public文件集里的静态页面；
1. public 文件夹里的文件修改，包括html、css、js都会自动刷新页面
2. less文件夹里的less文件修改保存后，会自动生成压缩后的同名css文件到css文件夹中

用到的node依赖

“browser-sync”: “^2.18.12”,
“express”: “^4.15.3”,
“less”: “^2.7.2”,
“less-plugin-clean-css”: “^1.5.1”,
“onchange”: “^3.2.1”,
“uglify-js”: “^3.0.23”

github项目地址：https://github.com/bingxuelover/node-auto-refresh

• gulp实现

使用

初始化安装依赖文件

npm install

启动动态监控服务

gulp serve

public文件夹里的scss和js文件修改后，会自动编译到dist文件夹里，包括压缩前和压缩后两份文件。
dist中文件的修改，都会触发自动重载页面。

用到的依赖

“browser-sync”: “^2.18.12”,
“gulp”: “^3.9.1”,
“gulp-rename”: “^1.2.2”,
“gulp-sass”: “^3.1.0”,
“gulp-uglify”: “^3.0.0”,
“gulp-watch”: “^4.3.11”

• gulp-rename 重命名
• gulp-sass 解析css文件
• gulp-uglif 压缩js文件
• gulp-watch 非必需，在不使用下面的watch功能的时候，直接使用watch监听文件修改；
• gulp-concat 合并多个文件为一个文件
• gulp-clean-css 压缩css文件
• express 启动node服务器

github项目地址：https://github.com/bingxuelover/gulp-auto-refresh

• 单纯的静态页面刷新

安装browser-sync

npm install -g browser-sync

使用

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"