This provides an example Gulp.js project which automates CSS tasks including:
- optimizing images
- compiling Sass .scss files
- handling and inlining assets
- automatically appending vendor prefixes
- removing unused CSS selectors
- minifying CSS
- reporting file sizes
- outputing sourcemaps for use in browser devtools
- live-reloading CSS in a browser when source files change.
To install on any Linux, Mac OS or Windows system, ensure Node.js is installed then clone the repository:
git clone https://github.com/craigbuckler/gulp-css.git
Navigate to the folder:
cd gulp-css
Install dependencies:
npm i gulp-cli -g
npm i
Note that module versions have been fixed to guarantee compatibility. Run npm outdated
and update package.json
as necessary.
Run in live-reloading development mode:
gulp
Navigate to http://localhost:8000/
or the External
URL if accessing from another device. Further instructions are shown on the index page.
Set NODE_ENV
to production
so Gulp tasks produce final code, i.e. remove unused CSS, minify files, and disable sourcemap generation.
Linux/Mac OS:
NODE_ENV=production
gulp css
(or inline NODE_ENV=production gulp css
)
Windows Powershell:
$env:NODE_ENV="production"
gulp css
Windows legacy command line:
set NODE_ENV=production
gulp css