All Projects → kris-ellery → web-starter-kit-gulp

kris-ellery / web-starter-kit-gulp

Licence: MIT license
Starter kit for automated front-end web development using Gulp, NPM, Bower, Babel, Sass, and Pug.

Programming Languages

CSS
56736 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
ApacheConf
554 projects

Projects that are alternatives of or similar to web-starter-kit-gulp

Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: ✭ 578 (+1551.43%)
Mutual labels:  gulp, bem, pug
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+551.43%)
Mutual labels:  gulp, bem, pug
Shangchao-Website
(官网案例) - 上朝科技 - Vue 2.0 - SPA项目
Stars: ✭ 22 (-37.14%)
Mutual labels:  gulp, pug
generator-craftskeleton
Starterkit for Craft CMS 2.x (Multi-Environment Configs with HeartyConfig, Gulp, and Bower for Dependencie-Management)
Stars: ✭ 14 (-60%)
Mutual labels:  gulp, bower
frontend-starter-kit-with-gulp
Frontend Starter Kit with Gulp for either Themeforest Projects or customizable projects.
Stars: ✭ 34 (-2.86%)
Mutual labels:  gulp, pug
Ignition Go
Bootstrap4 /Codeigniter 3 Modular (HMVC) App Building Framework - to build enterprise class web applications... Versions: CodeIgniter 3.1.9 AdminLTE 3.4 Bootstrap 4.5.0
Stars: ✭ 166 (+374.29%)
Mutual labels:  gulp, bower
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (+382.86%)
Mutual labels:  gulp, pug
marmelad
Заготовка фронтенд проекта для продвинутых и начинающих 🤘. Хорошо подходит для поддержания единой структуры проектов в команде и легкого переиспользования готовых блоков между проектами.
Stars: ✭ 15 (-57.14%)
Mutual labels:  gulp, bem
Pug Sass Boilerplate Starter Kit
A Front-end template for building web apps or sites using Pug(Jade) and Sass
Stars: ✭ 92 (+162.86%)
Mutual labels:  gulp, pug
is-my-train-delayed
An Angular web app built on Heroku with Node & Express. Shows information about delayed trains, and displays that in an easily consumable manner.
Stars: ✭ 15 (-57.14%)
Mutual labels:  gulp, bem
sage-starter
The best starter theme with a modern front-end development workflow. Based on Sage, HTML5 Boilerplate, gulp, Bower, and Bootstrap.
Stars: ✭ 42 (+20%)
Mutual labels:  gulp, bower
project-manager-laravel
Project manager system - PHP and AngularJS
Stars: ✭ 17 (-51.43%)
Mutual labels:  gulp, bower
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (+282.86%)
Mutual labels:  gulp, pug
Portfolio one Page Template
Free responsive one page portfolio template
Stars: ✭ 106 (+202.86%)
Mutual labels:  gulp, pug
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (+191.43%)
Mutual labels:  gulp, bem
Frontend-StarterKit
Frontend StarterKit - [Gulp 4, Pug, SCSS, ES6+]
Stars: ✭ 13 (-62.86%)
Mutual labels:  gulp, pug
raven
Raven: a theme-able blog workflow with gulp, pug, sass, and markdown. Check out the demo here:
Stars: ✭ 16 (-54.29%)
Mutual labels:  gulp, pug
Gulp Pure Start
Start your project with 'Gulp Pure Start' easily than ever!
Stars: ✭ 89 (+154.29%)
Mutual labels:  gulp, pug
Css Flags
A collection of pure CSS flags, all single divs.
Stars: ✭ 90 (+157.14%)
Mutual labels:  gulp, pug
website-template
静的Webサイト制作を少しモダンにするためのテンプレート
Stars: ✭ 62 (+77.14%)
Mutual labels:  gulp, pug

Web Starter Kit with Gulp

Alt text

Web Starter Kit is an opinionated build automation for front-end web development based on Gulp, Node, NPM, Bower, Babel, Sass, and Pug.

Note: Web Starter Kit is simply a guideline and it doesn't solve everything. It is up to you to modify whatever necessary to achieve your project goals.

Table of Contents

  1. Dependencies
  2. Build
    1. Environments
      1. Development
      2. Stage
      3. Production
  3. Server
    1. Local URLs
    2. Options
  4. Assets
    1. Data
    2. Fonts
    3. Images
    4. Media
    5. Miscellaneous
    6. Vendors
  5. Scripts
  6. Styles
    1. BEM Structure
  7. Views
    1. Pug Structure
    2. Environment Variables

Dependencies

Run: npm cache clear && npm i && bower cache clean && bower install

Note: Before you can install Web Start Kit dependencies, you will need to install Gulp, Node, NPM, and Bower.

back to top

Build

Generate a fresh build of your project. Task will run several individual tasks on files within ./src and then output them to ./build.

Run: gulp build

Environments

You can specify which environment you want to build. If you do not pass env as an option, then dev will be used by default.

Development

Run: gulp build --env=dev

Stage

Run: gulp build --env=stage

Production

Run: gulp build --env=prod

back to top

Server

Start a local dev server. Additionally, gulp will watch for any changes to files and reload browser while server is running.

Run: gulp server

Local URLs

Options

You can modify port, proxy, and many other settings in ./gulpfile.babel.js. For more information about BrowserSync go to http://www.browsersync.io/.

back to top

Assets

Run several individual tasks to copy static files from ./src to ./build.

Run: gulp assets

Data

Copy data files to ./build/data.

Run: gulp data

Fonts

Copy font files to ./build/fonts.

Run: gulp fonts

Images

Copy images to ./build/images. As a personal preference Web Starter Kit doesn't use automated image optimization. It is strongly recommended to use services like TinyPNG and TinyJPG to optimize images manually.

Run: gulp images

Media

Copy media files to ./build/media.

Run: gulp media

Miscellaneous

Copy miscellaneous files, such as .htaccess or robots.txt, to the root of ./build. If your project require custom settings per environment, then you can save individual files into appropriate directory within ./src/misc.

Run: gulp misc

Vendors

Bundle vendor files to ./build/vendors. You can install new client-side vendors using Bower, then reference appropriate files in ./src/vendors/bundle.js and ./src/vendors/bundle.min.js. Web Starter Kit comes with jQuery example.

Run: gulp vendors

back to top

Scripts

Run a series of sub-tasks to generate final JavaScript files. See ./gulpfile.babel.js for reference.

Note: Each file on the root of ./src/scripts will be compiled to its own file in ./build/scripts. Each file can have own includes, just like Sass with @import functionality. See ./src/scripts/main.js as an example.

Run: gulp scripts

back to top

Styles

Run a series of sub-tasks to generate final CSS files. See ./gulpfile.babel.js for reference.

Note: Each file on the root of ./src/styles will be compiled to its own file in ./build/styles.

Run: gulp styles

BEM Structure

Web Starter Kit follows a strict naming convention using BEM methodology.

Directory structure and selector names are divided into namespaces based on More Transparent UI Code with Namespaces article by Harry Roberts.

Views

Run a series of sub-tasks to generate final HTML files. See ./gulpfile.babel.js for reference.

Run: gulp views

Pug Structure

Web Starter Kit follows an opinionated directory structure. To learn more about Pug go to https://pugjs.org/api/getting-started.html/.

Environment Variables

Every Pug file has access to global env variable. You can use it to conditionally load unminified/minified assets. See ./src/views/includes/head.pug as an example.

back to top

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].