Basic Starter project with essential configured Gulp tasks
- sass
- scripts
- images
- critical (critical css for html & php files)
- Node.js installed
- A running PHP Server if you want to generate critical css for PHP files
or Clone the repo: git clone https://github.com/migliori/gulp-essentials.git
-
Unzip the package content to the root of your project
-
Open command prompt, navigate to your project folder and run npm:
npm install
to install node_modules.
Open your command prompt and call any [Gulp task](#Gulp tasks)
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/
│ ├── javascripts/
│ ├── sass
│ └── stylesheets
├── gulp/
│ ├── config.json
│ ├── critical.js
│ ├── sass.js
│ └── scripts.js
└── test-dir
├── carousel.html
└── jumbotron.php
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
-
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
=>combinecss
-
minifyjs // Minify js files - https://github.com/hustxiaoc/gulp-minify
-
combinejs // Concatenates files - https://github.com/contra/gulp-concat
-
scripts [main task]:
minifyjs
=>combinejs
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:
The critical CSS code is inserted in the <head>
part of the HTML file.
The file is saved in a /dist
subdirectory of the original HTML file.
The critical CSS code is generated and saved in [css-dir]/critical/[filename].min.css
where [css-dir]
is the directory defined in config.js
for 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>
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.
We use SemVer for versioning. For the versions available, see the tags on this repository.
- Gilles Migliori - Initial work - Migliori
This project is licensed under the MIT License - see the LICENSE.md file for details