# static-project

**Repository Path**: shirne/static_project

## Basic Information

- **Project Name**: static-project
- **Description**: 用gulp写好的前端静态页面切版用的js压缩及sass编译脚手架
- **Primary Language**: HTML
- **License**: WTFPL
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-05
- **Last Updated**: 2023-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


前端切版静态页面用的js压缩+less编译框架

## 使用效果
适用于设计师或前端工程师将设计稿转为静态页的过程中，不用直接写css代码，而是直接使用less语法编写样式（模块化，预定义色板，版本兼容[babel]等等）。<br />
然后本框架的gulp业务功能可以实现自动编译less文件，压缩js文件，以及调试过程中监视文件自动生成等

## 目录说明:
```tree
resource          //原始文件目录
   |- less        //less文件根目录，目录下的每一个less文件(以 _ 开头的除外)会对应的编译到css目录下同名文件<br />
   |  |- modal    //less模块文件目录，一般import到less目录下的一些less文件中，命名以 ＿　开头<br />
   |- js          //js原代码文件  src目录下的js压缩及监视(以 _ 开头的除外)<br />
static            //输出文件目录
   |- css         //编译压缩后的css文件
   |- js          //压缩后的js文件<br />
images            //可能需要的静态图片目录<br />
index.html        //示例html<br />
```


## 使用说明:

1. 开发环境  确保电脑已安装 npm gulp less 等
2. clone本项目到本地，然后在根目录执行 npm install  (淘宝镜像源 cnpm install)
3. 开始写代码
4. 需要调试的时候打开命令行，切到根目录执行 gulp  会自动进行一次编译然后监视文件(不要关闭命令行)
```bash
# 编译并监视文件
gulp

# 编译文件
gulp build

# 监视文件
gulp watch
```

## 用于传统项目的静态文件优化

可以将此项目配置文件略微调整，以针对传统项目做css及js文件优化

1. 将此项目目录结构放到项目目录中
2. 总结原项目css及js路径特点，也可以直接将完整的旧目录放入resource
   ```tree
   //示例的目录对应结构
   wwwroot        //旧项目目录
    |- css
    |- js
    |- news
    |   |- css 
    |   |- js 
    |- project    //本项目文件目录
    |   |- resource
    |   |   |- css
    |   |   |- js
    |   |   |- news
    |   |   |   |- css
    |   |   |   |- js
   ```
3. 将旧项目的原始css及未压缩或解压缩出来的js放入resource下的对应目录
4. 手动转换旧项目的css文件 (需要使用 css2less 命令 )
   ```sh
   css2less xxx.css > xxx.less
   ```
   > 如果转换时报错，一般是css文件语法不规范或有语法错误，找到对应源代码修改，然后再次运行转换

5. 修改gulpfile.js中的目录匹配路径，及生成路径
   ```js
   //步骤2的示例结构中，gulp的源目录及输出目录参数参考
   gulp.src('./resource/**/[^_]*.less')
      //...
      .pipe(gulp.dest('../'));
   ```

注意：实施前可以将旧项目部分文件复制一份出来，模拟使用，检查生成结果符合预期，再将配置放入正式项目使用。<br />
另外注意备份原项目文件，以防有兼容性问题