Weaverjs is an opinionated boilerplate for web development based on Gulp, Node, NPM, Sass and Pug.
It helps you by automating website builds and lets you focus on writing only reusable modules for html, css and javascript. You can visit the repository of Weaverjs's homepage to have an usage example.
Note: Weaverjs is a guideline and it doesn't solve everything. It is up to you to modify whatever is necessary to achieve your project goals and dreams.
- Quickstart
- Directory Layout
- Build
- Server
- Deploy
- Assets
- Scripts
- Styles
- Views
- Contributing
- Inspiration
npm cache clear && npm i && npm run gulp
Note: In order to install packages, you will need to install Node and NPM. It’s recommended to use nodenv to manage them
├── /dist/ # The compiled output (generated by Gulp)
├── /src/ # Application source files
│ ├── fonts/ # Asset folder for fonts
│ ├── images/ # Asset folder for images (jpg, png, ...)
│ ├── media/ # Asset folder for media (mp4, webm, ...)
│ ├── misc/ # Miscellaneous files for the root folder (favicon.ico, robots.txt, ...)
│ │ ├── all/ # Miscellaneous files for all environments
│ │ ├── development/ # Miscellaneous files for development only
│ │ ├── production/ # Miscellaneous files for production only
│ │ └── staging/ # Miscellaneous files for staging only
│ ├── scripts/ # Javascripts files
│ │ ├── components/ # Javascripts components files to be included
│ │ └── main.js # Main Javascripts files
│ ├── styles/ # Scss styles files
│ │ ├── base/ # Base styles are the default styles of base elements.
│ │ ├── components/ # UI elements
│ │ ├── objects/ # Class-based selectors which define undecorated design patterns
│ │ ├── settings/ # Setting files contain global configurations that are shared by more than one modules
│ │ ├── tools/ # Specific style for each views
│ │ ├── utilities/ # High-specificity explicit classes
│ │ └── main.scss # Global scss style file
│ ├── svg/ # Asset folder for svg files
│ ├── vendors/ # Vendors Javascripts files (jquery, ...)
│ │ ├── bundle.js # Non minimized vendors Javascripts files (for development)
│ │ └── bundle.min.js # Minimized vendors Javascripts files
│ └── views/ # Pug included files
│ ├── extends/ # Pug view files
│ ├── includes/ # Pug reusable components
│ ├── mixins/ # Sets of pug mixins and functions.
│ └── site/ # Pug view files
├── .node-version # Specific node version for nodenv
├── gulpfile.js # Gulp configuration
└── package.json # Project dependencies
npm run build
Generate a fresh build of your project. Task will run several individual tasks on files within ./src and then output them to ./dist.
You can specify which environment you want to build. Development environment is used by default when building with no option.
npm run dev
npm run stg
npm run prd
Start a local dev server. Additionally, gulp will watch for any change on files and reload the browser while the server is running.
npm run gulp server
If you want to host your site on Github Pages, you can deploy directly a production version on the gh-pages branch. Therefore, you have to commit at least once your project on a Github repository.
npm run github
- 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 ./dist.
npm run gulp assets
Copy font files to ./dist/fonts.
npm run gulp fonts
npm run gulp images
Copy images to ./dist/images. As a personal preference Weaverjs doesn't use automated image optimization. It is strongly recommended to use services like TinyPNG and TinyJPG to optimize images manually.
npm run gulp media
Copy media files to ./dist/media.
Copy miscellaneous files, such as .htaccess or robots.txt, to the root of ./dist. If your project require custom settings per environment, then you can save individual files into the appropriate directory within ./src/misc.
npm run gulp misc
npm run gulp vendors
Bundle vendor files to ./dist/vendors. You can install new client-side vendors using npm, then reference appropriate files in ./src/vendors/bundle.js and ./src/vendors/bundle.min.js.
Add jquery package in package.json
"dependencies": {
...
"jquery": "^x.x.x",
...
}Reference it for development in ./src/vendors/bundle.js
// =include jquery/dist/jquery.jsAnd for minified version in ./src/vendors/bundle.min.js
// =include jquery/dist/jquery.min.jsnpm run gulp scripts
Run a series of sub-tasks to generate final JavaScript files.
Note: Each file on the root of ./src/scripts will be compiled into its own file in ./dist/scripts. Each file can have its own includes, just like Sass with @import functionality. See ./src/scripts/main.js as an example.
npm run gulp 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 into its own file in ./dist/styles.
Weaverjs use iotaCSS SASS based OOCSS framework built for scale.
npm run gulp views
Run a series of sub-tasks to generate final HTML files. See ./gulpfile.babel.js for reference.
Weaverjs 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 the global env variable. You can use it to conditionally load unminified/minified assets. See ./src/views/includes/head.pug as an example.
- Create a personal fork of the project on Github.
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
Weaverjs is inspired by web-starter-kit-gulp by @KrisOlszewski