分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

基于requireJS和Gulp可快速搭建前端项目的脚手架

发布时间:2023-09-06 02:35责任编辑:郭大石关键词:前端Gulp

基于requireJS和Gulp可快速搭建前端项目的脚手架。

项目地址

  1. git clone git@github.com:perfectSymphony/Gulp-cli.git

项目目录

  1. ├── README.md # 项目说明
  2. |—— bin # (在gulpfile文件中使用到)解析layout中的模板html,将完整的html产出到src/html中
  3. ├── dist # 打包生成的项目文件
  4. |—— logs # 监听编译less文件时,打印报错信息,
  5. ├── gulpfile.js # gulp配置文件
  6. ├── package.json # 依赖包
  7. |
  8. ├── src # 项目文件夹
  9. ├── conf # 配置文件目录
  10. ├── data # 模拟数据
  11. |—— public # 第三方库
  12. |—— css # 由less文件生成的的css文件
  13. │── images # 图库
  14. │── js # 组件化脚本文件
  15. │── less # less
  16. |── layout # 页面
  17. └── widget # 公共页面

项目中使用到的部分技术如下:

  1. - require:实现模块化开发;
  2. - mock:实现本地模拟服务器端返回数据;
  3. - art-template:渲染数据;
  4. - layui:UI框架;
  5. - browsersync:启动项目;

跨域问题:

开发环境:proxy; 生产环境:根据自己公司的实际情况选择;

如何使用

1、下载项目:

  1. git clone git@github.com:perfectSymphony/Gulp-cli.git

2、安装依赖:

  1. $ cd Gulp-cli && npm install

3、启动项目

  1. $ npm run start

4、项目打包

  1. npm run build

项目启动命令

  1. 单独编译: npm run build
  2. 单独启动: npm run dev
  3. 编译并启动: npm run start

自动化部署功能

  1. Gulpfile.js中实现了项目自动化部署功能。需要用到自动化部署,可以在Gulpfile.js中配置一下` ‘deployFile‘,‘execSSH‘ `就可以用了

如果该项目有帮助到你,请动动你的手指,给一个Star。

微信公众号:

备注

  • 本脚手架提供了基本的技术支持,可以根据自己的需求,修改。

  • 如有设计不合理地方,可以提出,也可以到我的微信公众号里面提出改进问题。

  • 项目地址 如对你有帮助,希望给个Star(* ̄︶ ̄)。

基于requireJS和Gulp可快速搭建前端项目的脚手架

原文地址:https://www.cnblogs.com/myprogramer/p/10556153.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved