Gruntfile静态网站制作神器: 静态网页的Gruntfile自动生成css,修改htm自动更新网页，修改scss 自动生成css,并且自动添加浏览器兼容前缀，并且自动压缩css！修改js 自动合并成1个js！

#  Gruntfile静态

- [Gitee](https://gitee.com/hexiangss/gruntfile-static) 
- [官网](https://www.xhcss.com) 
## 简介

Gruntfile静态是一个针对于静态网页编写的打包js和scss的功能！
可以对文件夹内js 打包成一个js，减少前端请求
可以多scss文件自动编译成css 并且 自动添加兼容浏览器的前缀，并自动压缩

## 安装

### 全局安装 grunt
- 需要先全局安装grunt， cmd 模式下
```npm
	npm install -g grunt-cli
```
- 打开项目安装插件
```npm
	npm install
```
- 启动项目
```npm
	npm start
```
## 目录
```html
├── app           使用项目目录
│  ├── basic      项目文件生成的目录
│      ├── js   js目录
│         ├── load.js      jq图片懒加载生成的文件 
│         ├── load.min.js  压缩文件
│         ├── main.js      src/js/dn 全目录合并后的js文件（电脑端）
│         ├── main.min.js  压缩后的电脑端文件
│         ├── sj.js        src/js/sj 全目录合并后的js文件（手机端）
│         ├── sj.min.js    压缩后的手机端文件
│      ├── css  css目录 
│         ├── main.css     src/scss/dn.scss生成的css带兼容前缀的文件（电脑端）
│         ├── main.min.css 压缩文件
│         ├── sj.css       src/scss/sj.scss生成的css带兼容前缀的文件（手机端）
│         ├── sj.min.css   压缩文件
│  ├── htm                项目的htm文件
│      ├── index.htm      电脑主页
│      ├── sj   
│          ├── index.htm  手机主页
├── src                   开发文件目录
│  ├── js                 js目录
│      ├── dn             电脑端的js目录，此目录所有文件会合并后打包!
│      ├── sj             手机端的js目录，此目录所有文件会合并后打包!
│      ├── public         公用目录，自己选择打包
│      ├── swiper         swiper组件的js目录，已经合并到电脑和手机端
│  ├── scss            
│      ├── dn.scss        电脑端的scss解析成css到app目录,自动添加浏览器兼容前缀
│      ├── sj.scss        手机端同理,不过手机端减少了兼容版本
│      ├── public         公用目录，自行在dn.scss引入，不自动合并了！
│      ├── swiper         swiper组件的scss目录,自行到scss目录合并
├── Gruntfile.js          grunt核心包，所以内容皆依靠此文件！
├── package.json          可以配置一些头部生成的注释和需要的组件
```

## 使用

- 预览页面
 ```html
 电脑端	http://localhost:3000/htm/index.htm
```
 ```html
 手机端	http://localhost:3000/htm/sj/index.htm
```
可以随便修改app/htm 下面的htm内容，前台会自动更新，可以自行新建页面也灰通用效果

src文件为开发文件，只是开发环境用到，修改后会自动打包到app/basic/目录下,并且同时自动更新页面，所以不需要你再每次修改f5频繁的刷新了！
- 电脑端,全前缀兼容
```css
.flex{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}  
```
- 手机端，不需要多兼容，减少代码量
```css
.flex {
  display: flex;
}
```

## 反馈

- 有任何疑问或者建议，请提 [Issue](https://gitee.com/hexiangss/gruntfile-static/issues)

在路上/Gruntfile静态网站制作神器

简介

发行版

贡献者

近期动态

在路上/Gruntfile静态网站制作神器 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

在路上/Gruntfile静态网站制作神器