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.
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.
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
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.
Run: gulp build --env=dev
Run: gulp build --env=stage
Run: gulp build --env=prod
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 - http://localhost:3000
- UI - Set to
falseby default
You can modify port, proxy, and many other settings in ./gulpfile.babel.js. For more information about BrowserSync go to http://www.browsersync.io/.
Run several individual tasks to copy static files from ./src to ./build.
Run: gulp assets
Copy data files to ./build/data.
Run: gulp data
Copy font files to ./build/fonts.
Run: gulp fonts
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
Copy media files to ./build/media.
Run: gulp media
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
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
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
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
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.
Run a series of sub-tasks to generate final HTML files. See ./gulpfile.babel.js for reference.
Run: gulp views
Web Starter Kit follows an opinionated directory structure. To learn more about Pug go to https://pugjs.org/api/getting-started.html/.
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.