{"id":15017391,"url":"https://github.com/u9648u6653u52c7/projecttemplate","last_synced_at":"2025-04-12T11:43:31.238Z","repository":{"id":223658136,"uuid":"64896842","full_name":"u9648u6653u52c7/projectTemplate","owner":"u9648u6653u52c7","description":"Project template for creating web app. It has webpack and gulp.","archived":false,"fork":false,"pushed_at":"2017-08-19T11:17:47.000Z","size":63,"stargazers_count":26,"open_issues_count":0,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-26T06:34:23.007Z","etag":null,"topics":["es6","gulp","jasmine","karma","less","multipage-application","projecttemplate","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/u9648u6653u52c7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-08-04T02:51:17.000Z","updated_at":"2023-01-10T12:46:31.000Z","dependencies_parsed_at":"2024-02-21T12:23:46.262Z","dependency_job_id":"2e56c758-4113-4206-83ea-484254ed4ffc","html_url":"https://github.com/u9648u6653u52c7/projectTemplate","commit_stats":null,"previous_names":["u9648u6653u52c7/projecttemplate"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u9648u6653u52c7%2FprojectTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u9648u6653u52c7%2FprojectTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u9648u6653u52c7%2FprojectTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u9648u6653u52c7%2FprojectTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/u9648u6653u52c7","download_url":"https://codeload.github.com/u9648u6653u52c7/projectTemplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248564044,"owners_count":21125404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","gulp","jasmine","karma","less","multipage-application","projecttemplate","webpack"],"created_at":"2024-09-24T19:50:23.865Z","updated_at":"2025-04-12T11:43:31.216Z","avatar_url":"https://github.com/u9648u6653u52c7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"projectTemplate\n========\n\nprojectTemplate即工程模板，创建之初衷是想利用Gulp、Webpack为开发人员提供一个开箱即用的开发环境。\n\n### 技术栈\n整个技术栈的搭建主要是针对多页面应用；单页面的应用可以选择相关框架或库提供的脚手架工具，如：vue-cli……;\n单页应用其实就是比多页面应用承载了更多的业务，在前端的架构上更加复杂,需要有路由、状态管理等支持,如果愿意~~~~,该项目可以修改成一个单页面的应用;单页面和多页面其实都无所谓啦。。。。\n\n\n##### Gulp + Webpack + ES6 + Vue or Other\n\n\u003e __Gulp__：流式构建系统\n  __Webpack__：一个打包工具能很好的解析模块依赖并生成相关静态资源。与生俱来的支持CommonJs、AMD、ES6……，它视所有前端资源为模块；与此同时还具有一定的构建能力。\n  __ES6__：JS的未来\n  __Vue__：数据驱动的组件，为现代化的 Web 界面而生。 具有响应的数据绑定系统、组件系统……\n  __Other__：jQuery、Zepto、Handlerbas……\n\n### 目录结构\n\n\u003e\n    projectTemplate/\n        ├── scripts/    node脚本\n        │  ├──\n        │  ├── dev-server.js  本地开发服务器\n        │  ├── preview-server.js  打包后预览服务器\n        │  ├── build.js  打包脚本\n        │  ├── utils.js  工具函数\n        │  ├──\n        ├── config/     工程配置\n        │  ├──\n        │  ├── index.js  基础配置文件，在此可简单的修改webpack相关配置\n        │  ├── webpack.base.js  webpack的基础配置，主要是loader、resolve、extract-text-webpack-plugin、CommonsChunkPlugin、devtool的配置\n        │  ├── webpack.dev.js   webpack开发配置，主要是livereload、HMR及相关的插件\n        │  ├── webpack.prod.js  webpack生产配置，主要是代码的压缩混淆，图片压缩，加hash\n        │  ├── karma.conf.js  测试配置\n        │  ├──\n        ├── src/   开发目录\n        │   ├── components/   组件\n        │   ├── pages/        页面（页面下的项目目录需要遵循一定的规范以便创建webpack的入口文件，不过这些规范是可以调整的；以下只是推荐）\n        │         ├── index/   首页\n        │              ├── images/  图片资源\n        │              ├── page.css 样式文件，文件名称可以按照自己意愿命名\n        │              ├── page.js  脚本文件及webpack的入口文件，文件名称可以在/config/index.js配置\n        │              ├── template.html 模板文件及要撰写的html文件，文件名称可以在/config/index.js配置\n        │              ├──\n        │\n        ├── dist/  代码产出目录\n        │\n        ├── test/  测试（目录可以意愿来创建，但是测试文件名称必须遵循*_test.js的命名规范，可在/config/karma.conf.js修改配置）\n        │\n        ├── node_modules/     自动生成，包含node依赖以及开发依赖\n        │\n        │\n        └── etc\n\n\n### [femock](https://github.com/yewumian/femock) 前端冒烟数据\n原想搭建一个mock服务器供前端本地开发使用；然而朋友开发了一个mock数据平台且简单实用，正好可以在此使用。\n\n### 开发体验\n\u003e 1. 舒适的编码 （相关资源就近管理）\n2. 模块化 （webpack）\n3. 组件化 （每个人对组件的定义不同，按照自己的意愿来吧；或者使用第三方带有组件系统的库或框架：Vue、React……）\n4. 资源嵌入 （webpack）\n5. 按需加载 (webpack)\n6. 资源优化 （webpack）\n7. 测试\n\n### 使用方式\nprojectTemplate现提供3条命令进行日常开发，命令需在工程目录下运行。\n\u003e 1. npm run dev   （本地开发）\n2. npm run build   （代码打包）\n3. npm run test    （代码测试）\n4. npm run preview  (代码打包后预览)\n\n### 备注\n因该项目还未成熟且在不断的优化过程中，在使用过程中可能会出现一定的问题。如果要使用的话可根据需要进行阉割或优化。\n不得不说webpack的能力实在是太强悍了，但是入门容易出门难，要想发挥其更大的威力还是需要的不断学习。\n\n##### 优化中……\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fu9648u6653u52c7%2Fprojecttemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fu9648u6653u52c7%2Fprojecttemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fu9648u6653u52c7%2Fprojecttemplate/lists"}