# web-dev-tools
**Repository Path**: yuesong/web-dev-tools
## Basic Information
- **Project Name**: web-dev-tools
- **Description**: 基于webpack的页面开发工具集
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2015-08-13
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
##网页开发工具
这是一个基于webpack、gulp的网页开发工具，适用于网站页面开发，适用于写网站的页面，使用这个工具，你将带来完全不一样的写法。
##安装
1. 下载工具,使用git下载
git clone https://git.oschina.net/yuesong/web-dev-tools.git
或[点击这里](https://git.oschina.net/yuesong/web-dev-tools/repository/archive?ref=master)下载
2. 安装依赖，工具依赖gulp和bower，运行于 node.js环境，请先安装 node.js 和 gulp，
npm install -g gulp-cli bower
3. **安装**,在工具根目录，命令行中执行
npm install && npm run update
4. 打包，当代码开发完毕后，将所有css合并为一个style.css文件,将所有js库合并为vendor.js，将自己的代码合并为app.js。打包时在工具根目录执行命令
npm run build
会在 app/src 目录下生成打包后的文件
##使用说明
###命令工具
* `npm run dev`:打开开发服务器，开发阶段都应该打开
* `npm run build`：打包编译，将css与js打包
* `npm run update`：更新npm和bower
####网页模板
网页开发工具集
注意三个地方：link标签和两个script标签，这三个文件都是webpack生成的文件，我们在网页写的所有css与js全部都会集合到这三个文件中；
* style.css: 将网页的所有css全部集中到这一个文件
* vendor.js: 将所有第三方库，全部合并到这一个文件
* app.js： 将自己写的js代码，全部放在这一个文件
在开发阶段，必须要在 http://localhost:8888 中引入这些文件，在打包后直接在 app/src 目录下引入这些文件
####CSS处理
#####引入css文件
在 src_dev/js/app.js 中，我们不在用link标签引入 CSS ,而是这样
require('bootstrap/dist/css/bootstrap.css');
这样就引入了一个css文件,可以使用相对路径和绝对路径，因为css会有依赖问题，我们可以按照顺序的使用require引入css文件
require('bootstrap/dist/css/bootstrap.css');
require('fullpage/css/fullpage.css');
require('../style/css/style.css');
######sass支持
在任何目录下新建后缀为.scss或者.sass文件，就可以使用sass了，导入sass样式与导入css一样
require('style/sass/style.sass');
require 后自动编译为css文件合并到style.css
######less支持
在任何目录下新建后缀为.less文件，就可以使用less了，导入less样式与导入css一样
require('style/less/style.less');
require 后自动编译为css文件合并到style.css
####JS处理
#####ES6支持
在任何js文件，都可以部分或全部使用ES6编码方式编写JavaScript，会使用 babel 自动编译为ES5
#####JS库导入
可以使用bower或者npm安装js库，然后直接导入，比如
bower install jquery
或
npm install jquery
后直接导入，**导入js时要在路径前添加 `script!`**
require('script!jquery')
require('script!bootstrap/dist/js/bootstrap.js')
// 或者使用 es6 语法
import 'script!jquery'
import 'script!bootstrap/dist/js/bootstrap.js'
##FAQ
1. **将所有文件重新打包后实时预览，开发会不会变得刷新很慢呢****
不会，webpack 是使用热替换方式更新文件，只会更新更改的部分，所以速度会非常快，感觉不到延时。当你使用该工具真正开发的时候你就能感觉的出来到底会不会卡了
2. **支持开发阶段实时刷新预览吗**
支持，更改html后自动刷新页面，更炫的是，更改JS，无需刷新便可看到实时效果；