Welcome to the Gulp Starter Kit.
Table of Contents
Installation requirements
- Node.js (at least version 10)
- NPM
- Gulp.js version 4
Build Tools & Frontend Assets
Tools for workflow:
- Gulp 4 - Documentation
- Sass Compiling (using gulp-sass) - Documentation
- PostCSS (using gulp-postcss) - Documentation
- Babel.js - Documentation
- ESlint (using gulp-eslint) - Documentation
- Webpack 4 (for javascript dependencies) - Documentation
- BrowserSync - Documentation
- Minification of CSS and JS for production use (using clean-css and Webpack's built in optimization of 'production' mode)
- Favicon Generation (using gulp-real-favicon) - Documentation
Frontend assets:
- Tailwind CSS - Documentation
Getting Started
Customizing output path
Change "paths": { "distFolder": "dist/" } in package.json to be where you want to output the frontend files. If you leave everything as is, it will create this folder structure inside the distFolder:
/dist
|
|- /images
|- /fonts
|- /css
|- /js
If more control over the folder structure is needed inside gulpfile.js you can edit:
dist_css = path.join(dist_folder, '/css'),
dist_js = path.join(dist_folder, '/js'),
dist_img = path.join(dist_folder, '/images'),
dist_font = path.join(dist_folder, '/fonts'),
dist_html = path.join(dist_folder, '/**/*.{twig,html}'),Injecting links to CSS and Javascript from gulp build
First, make sure dist_html variable inside gulpfile.js points to the production path to either your html files if it's a static site, or points to the template files (php, twig, mustache, etc.).
Then place these html comments inside the template or html files:
For CSS:
<!-- inject:css -->
<!-- endinject -->
For Javascript:
<!-- inject:js -->
<!-- endinject -->
Setting up PurgeCSS
Make sure variable templates_purgeCSS in gulpfile.js contains globs to the html files or template files of your site. PurgeCSS will parse these files for the CSS selectors used and then extract them for the production version of the CSS file.
Favicons
Overwrite src/favicon260x260.png or change the variable const favicon = path.join(src_folder, 'favicon260x260.png') to point to the master image for generating the favicons. Master favicon image should be at least 260x260.
Change these variables in gulpfile.js to match your site's design.
const theme_color = '#ffffff';
const favicon_bg = '#da532c';Build Commands
gulp serve
Probably the go-to command for development.
This compiles sass (and runs any postcss plugins), lints javascript, builds webpack, optimizes images, copies fonts, injects the link to CSS and javascript sources, and outputs all frontend files to the distFolder.
Also, it spins up a static server using browsersync. Frontend of the site can be accessed at http:localhost:3000.
Then it watches these files for any changes:
src/**/*.html
src/css/**/*.scss
src/js/**/*.js
src/images/**/*.+(png|jpg|jpeg|gif|svg|ico)
src/fonts/**/*.{eot,svg,ttf,woff,woff2}
and then it will re-run commands depending on what changed in order to compile sass, build webpack, or copy over file changes.
npm run serve:dist
This is the production version of gulp serve. It creates the production version of CSS and Javascript files by:
- Minifies CSS (clean-css) and JS (Webpack Terser Plugin)
- Omits source maps for CSS and JS
- Uses purgeCSS to remove unused CSS declarations. Which helps to drastically reduce the file size when using frameworks like tailwindCSS or bootstrap.
npm run build
Builds out production version of frontend code.
gulp generate-favicon
This uses gulp-real-favicon to generate the favicons using a master favicon image (src/favicon260x260.png is the default one).
These are the files generated out of the box:
android-chrome-192x192.png
android-chrome-256x256.png
apple-touch-icon.png
browserconfig.xml
favicon-16x16.png
favicon-32x32.png
favicon.ico
html_code.html ## contains the html that should be added to the head of your site
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
mstile-70x70.png
site.webmanifest ## customization of manifest items can be done inside gulpfile.js