• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

IamManchanda/gulp-webpack: Gulp 4 + Webpack 4 + Babel + BrowserSync + Font Aweso ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

IamManchanda/gulp-webpack

开源软件地址(OpenSource Url):

https://github.com/IamManchanda/gulp-webpack

开源编程语言(OpenSource Language):

JavaScript 84.6%

开源软件介绍(OpenSource Introduction):

Gulp 4 + Webpack 4 + Babel + BrowserSync + Font Awesome 5

All the tasks are done via Gulp. Webpack is just used for ES6 Import/Export as Gulp can't do it to my best of knowledge. Apart from ES6 Import/Export, Gulp was able to do all my other work that I wanted so I have mainly used Gulp. That being said, you can modify the webpack config to your preferences from webpack folder and use webpack specific plugins as you need.

For Live reloading, Browsersync has been used. For ES6 Transpilation, Babel has been used. For SourceMaps, Gulp & Webpack both have been used. For Icon Fonts, Font Awesome 5 has been used with Sass/CSS Workflow.

Setup

  • Install Node
  • Optionally, also install Yarn or use Npm that comes with Node pre-installed
  • Install Gulp globally through npm install -g gulp@next
  • Install Webpack globally through npm install -g webpack
  • Fork this project
  • Clone the forked project (Yours!)
  • cd to the cloned project
  • Install all packages with npm install or yarn install

Usage

  • Build the Project and Serve locally (for Production) - npm start or yarn start. The Production port is 8000.
  • Build the Project and Serve locally (for Development) - npm run dev or yarn run dev. The Development port is 3000.
  • Exporting the Project to zip file - npm run export or yarn run export

Important Note: Don't run these npm scripts simultaneously.

Appendix

  • Tooling - Gulpfile Lives in gulpfile.js and Webpack config files live within webpack folder.
  • Source Files - Lives in public/src folder
  • Compiled Files - Lives in public/dist folder. When you clone, you won't get them but as soon as you run those any of above usage tasks (start/build/export), the public/dist will be created.
  • Exported Project - The exported project is imported from public folder and gets exported as website.zip to project root

Performance (Lighthouse)

This is the result of performance tests (97%) within Lighthouse for Production Mode. It's Not excellent (yet!), but still quite good actually. 97% Performance

For Development mode it's 96% respectively.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
deepak1556/gulp-browserify: Bundle modules with BrowserifyJS发布时间:2022-06-21
下一篇:
robrich/gulp-if: Conditionally run a task发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap