Front-end development stack used at Actum to create beautiful things.
- Getting started
- Project structure
- Naming conventions
- Debugging with Visual Studio Code Debugger for Chrome
|CSS||SASS||Stylelint||PostCSS (autoprefixer, cssnano)
- SVGStore combines SVG files into one with
- SVGStore combines SVG files into one with
- Development mode:
- File Watching and Live Reloading with BrowserSync
- Autogenerated index of HTML templates
- Production mode
- JS and CSS are uglified and minified
- Local production server for testing
- HTML templates validation
npm install -g gulp
Clone the repository:
git clone https://github.com/actum/gulp-dev-stack ./PROJECT_NAME
Install package dependencies with
npm installunder the root of your
Configure the project. Do not forget to change the respective keys in
package.jsonaccording to your project’s info, and setup a unique listening port in
Following a certain file and folder structure keeps development, maintenance and debugging processes much easier when switching from project to project based on the same development stack.
Build (production) folder generated and changed automatically by various Gulp tasks. Contains production-ready compiled CSS (
dist/js), graphics (
dist/gfx) and HTML. Should not be edited manually.
tasks/ The list of Gulp tasks. Each task is responsible for handling automation for different file types (i.e.
styles.jscompiles SCSS to CSS, and
serve.jslaunches a local server for development). Do not edit unless you know what you are doing.
config.js Global Gulp configuration, consisting of declaring environment and folder/file paths. While we would not recommend to change the project structure references, you may and should customize such keys as
TITLE, which are unique for each project.
environment.js Determines current working environment (
Development folder. This is where all the action happens.
- api.js Entry point of dummy data for api server.
- components/ React-driven components.
- modules/ Vanilla JS classes.
- store/ Redux store.
- utilities/ Small helpers for everyday routine.
- app.js Entry point for JS bundling.
- factory.js Functions for initializing one instance of module on multiple containers.
- init.js Functions for initializing one instance of module per one container.
- render.js Functions for initilizing React components.
- sprites/ Folder for SVG sprites, where each nested folder represents a sprite name, and containing files - the icons bundled into that sprite.
- example.svg Single SVG icons, optimized and outputted individually for direct usage.
- base/ Base components used by Styleguide.
- bootstrap/ Bootstrap overrides.
- components/ Custom components.
- critical.scss Critical CSS
- main.scss Entry point for SCSS compiling.
- variables.scss Custom variables
Template page written in Nunjucks and compiled to
/ (root files)
A brief summary of dev stack root files purpose.
A definition of coding styles for different code editors and IDEs. You can specify what configuration (indent size, charset, trim whitespaces, ...) should be used for what files.
Path-specific settings used by Git. Settings that Git applies to certain subdirectories or subsets of files - for example EOL (End Of Line) setting.
Contains patterns that are matched against file names in your Git repository to determine whether or not they should be ignored (commited).
Stylelint configuration. Primarily used to specify and configure rules of CSS (SCSS) linting.
CircleCI configuration. How to set up and test your project.
Project workflow guideline. How to create branches, write commits or assign pull requests.
Gulp configuration and definition of automation tasks.
Open source license of Git repository. It enables others to freely use, change and distribute the project in the repository.
NPM manifest. Automatically generated with change of
package.jsonif working with NPM. Holds information about which versions of each dependency were installed in order to get consistent installs across machines.
NPM packages specifics. It lists the packages (with their versions) your project depends on.
Yarn manifest. Automatically generated with change of
package.jsonif working with Yarn. Holds information about which versions of each dependency were installed in order to get consistent installs across machines.
To start your development process, run
gulp --dev in the terminal. This will prepare the project for the work and launch watch tasks to update the files on-the-fly as you work. A
API mock server
If you want to start also an API server, run
gulp --dev --api. This server will run on different port which is defined in
If you want to start Mokker, run
gulp server. This server will run on different port which is defined in
Remove built targets
If you want to revert back to a fresh state without built files, run
It will remove the
dist/ folder and all built targets in
To prepare production-ready files, run
gulp and grab built assets from
Updates from devstack to your project
- create branch in your project’s repo (eg.
- add devstack as a remote to your project (
git remote add devstack firstname.lastname@example.org:actum/gulp-dev-stack.git)
- fetch remote (
git fetch devstack)
- merge branch from devstack remote to
- merge your project’s
- solve eventual conflicts
- push the
- create PR from
Debugging with Visual Studio Code Debugger for Chrome
- Install extension Debugger for Chrome
- Run project in development mode
- Run Debugger for Chrome by F5 key (in Windows)
|Error: "Local gulp not found in ..." when running
|Solution: Make sure you run
When you have encountered a bug, or have a useful suggestion how to improve this development stack, do not hesitate to Create a new issue.