/gulp-css

Using Gulp.js for CSS tasks

Primary LanguageJavaScriptMIT LicenseMIT

gulp-css

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.

Installation

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.

Usage

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.

Build production CSS

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