Фронтальная автоматизация быстро создается на основе gulp+webpack.

Webpack Gulp
Фронтальная автоматизация быстро создается на основе gulp+webpack.

Он подходит для небольших и средних проектов, чтобы быстро создать интерфейсную структуру проекта. Например, страница активности, официальный сайт, простой проект мобильного терминала, небольшой демо-тест и т. д.

Начало проекта

// 常用命令
开发环境： npm run dev
生产环境： npm run build

// 单任务命令
执行压缩： gulp zip
编译页面： gulp html
编译脚本： gulp script
编译样式： gulp styles
语法检测： gulp eslint
压缩图片： gulp images

адрес проекта

  • Если это полезно для вас, я надеюсь дать звезду! Хахаха! !
git clone https://github.com/vincentSea/gulp-cli.git

каталог проекта

├── README.md         # 项目说明
├── config            # gulp路径配置
├── dist              # 打包路径
|
├── gulpfile.js       # gulp配置文件
├── package.json      # 依赖包
|
├── src               # 项目文件夹
│   ├── include       # 公用页面引入
│   ├── index.html    # 首页
│   ├── static        # 资源文件夹
│   │   ├── images    # 图库
│   │   ├── js        # 脚本
│   │   └── styles    # 样式（scss, css）
│   └── views         # 页面
|
├── static            # 打包到dist中static文件中
└── webpack.config.js # webpack配置文件

проектное соглашение

1. Используйте строгие спецификации eslintСсылка на документацию

  • Если вы не хотите использовать eslint, вы можете удалить задачу из gulpfile.

2. Используйте предварительную обработку scss

  • Различные инструменты предварительной обработки могут быть настроены в соответствии с личными предпочтениями.

3. статическая папка

  • Статическая папка в каталоге первого уровня может хранить содержимое файлов, которые не нужно компилировать, например, некоторые плагины, картинки, файлы шрифтов и т.д.
  • Каждый раз, когда NPM запускают Dev или Build, содержимое статической папки будет упаковано в Dist / Static

прокси-режим

  • Настраивается в файле config/index.js

Примеры следующие

 middleware: [
  proxy.proxyPrase(
    {
      target: 'http://v3.wufazhuce.com:8000/api',
      route: '/api'
    }
  )
]

использовать веб-пакет

  • Интегрируйте функцию webpack, вы можете выбрать сами

файл config/index.js

useWebpack: false // 是否启用webpack

После Сяошэн

  • Эта передовая автоматизированная структура построения предназначена только для простоты и удобства.

  • Вы можете изменить конфигурацию в соответствии с вашими требованиями.

  • Если конструкция неразумная, можете поднять, я смиренно выслушаю

  • адрес проектаЕсли это полезно для вас, я надеюсь дать звезду! Хахаха! !

Категории