gulp-essentials v1.1.1
Gulp Essentials
Basic Starter project with essential configured Gulp tasks
- sass
- scripts
- images
- critical (critical css for html & php files)
Table of contents
Quick start
Prerequisites
- Node.js installed
- A running PHP Server if you want to generate critical css for PHP files
Installation
or Clone the repo:
git clone https://github.com/migliori/gulp-essentials.gitUnzip the package content to the root of your project
Open command prompt, navigate to your project folder and run npm:
npm installto install node_modules.
Usage
Open your command prompt and call any Gulp task(#Gulp tasks)
What's included
Within the download you'll find the following directories and files:
gulp-essentials/
├── gulpfile.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── assets/
│ ├── images/
│ ├── javascripts/
│ ├── sass
│ └── stylesheets
├── gulp/
│ ├── config.json
│ ├── critical.js
│ ├── images.js
│ ├── sass.js
│ └── scripts.js
└── test-dir
├── carousel.html
└── jumbotron.phpGulp structure
The configuration file defines the location of directories.
The different tasks are separated into specific files in the /gulp directory using gulp-load-plugins.
The main gulpfile.js file loads all tasks and defines global tasks (watch, dist, default).
##Gulp tasks
gulp sass
- scss // Compile scss files to css folder - https://github.com/dlmanning/gulp-sass
- postcss // Add css vendor prefix - https://github.com/postcss/gulp-postcss
- cssnano // optimise css - http://cssnano.co
combinecss // Concatenates files - https://github.com/contra/gulp-concat
sass main task:
scss=>postcss=>cssnano=>combinecssgulp scripts
- minifyjs // Minify js files - https://github.com/hustxiaoc/gulp-minify
- combinejs // Concatenates files - https://github.com/contra/gulp-concat
scripts main task:
minifyjs=>combinejsgulp images
optimizeimages // Optimize images - https://github.com/sindresorhus/gulp-imagemin
images main task:
optimizeimagesgulp critical
Critical CSS is an important feature.
This package generates critical CSS for both HTML and PHP files.
- critical main task:
downloadHtml=>criticalHtml=>criticalPhp=>deleteTemp
The process is different depending on the file type:
critical CSS for HTML files:
The critical CSS code is inserted in the
<head>part of the HTML file.The file is saved in a
/distsubdirectory of the original HTML file.Critical CSS for PHP files:
The critical CSS code is generated and saved in
[css-dir]/critical/[filename].min.csswhere[css-dir]is the directory defined inconfig.jsfor your CSS files, and[filename]is the basename of the PHP source file.Once the critical CSS file is generated, you can add it to your page with a PHP include:
<style type="text/css" media="screen"> <?php // Critical css include_once('assets/stylesheets/critical/critical-' . pathinfo(basename($_SERVER['SCRIPT_NAME']), PATHINFO_FILENAME) . '.min.css'); ?> </style>- critical main task:
Extras
This package includes a few files for tests purpose that can be used as starter project files:
- Javascript plugins:
- pace.min.js - Automatic page load progress bars
- holder.min.js - Holder renders image placeholders entirely in browser
- SAAS basic structure and files
- HTML and PHP files with Bootstrap 4 CSS
The HTML files are following the best practices for fast loading:
- Preload CSS
- Defer Javascript
- Google Webfonts Loader
These practices contribute to make the web faster and play nice with Critical CSS.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- Gilles Migliori - Initial work - Migliori
License
This project is licensed under the MIT License - see the LICENSE.md file for details