CSS Automation 

with GulpJS
 

#2

 

Frontend Workflow

 
By Raymon Schouwenaar
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
After this video, you know how to...
  • create a Gulpfile
  • automatically create minified CSS files
  • merge multiple CSS files into 1 single file
  • automatically refresh the browser
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Before we start check
  1. Check if you installed NodeJS & NPM
  2. Check if you have created an package.json file
If not check episode #1 of the Frontend Workflow.
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
How to create 

a Gulpfile
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Make sure you installed these packages globally
 
  • Gulp
  • Browser-sync
 
$ npm install gulp browser-sync -g

// For Mac and Linux
$ sudo npm install gulp browser-sync -g
Run this command in your terminal
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Install these packages in your project folder
 
Gulp, Gulp-clean-css, Gulp-concat-css and Browser-sync
1
$ npm install gulp gulp-clean-css gulp-concat-css browser-sync --save-dev
Run this command in your terminal. With --save-dev it will be added to the package.json
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Create the gulpfile.js in your project folder and add this to the file.
 
var gulp = require('gulp');

gulp.task('css', function() {
    gulp.src('src/css/style.css')
        .pipe(gulp.dest('dist/resoure/css'));
});

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Run this command
 
$ gulp css
Run this command in your terminal.
 
With this command you copy your CSS file to 'dist/resource/css'
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
How to create minified CSS files automatically
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Add the gulp-clean-css package
 
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('css', function() {
    gulp.src('src/css/style.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/resoure/css'));
});

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Run this command
 
$ gulp css
Run this command in your terminal.
 
With this command your CSS will be minified and copieëed to 'dist/resource/css'
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Let's automate this!
 
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('css', function() {
    gulp.src('src/css/style.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/resoure/css'));
});

gulp.task('default', ['css'], function () {
    gulp.watch('src/css/style.css', ['css']);
});

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Run this command
 
$ gulp
Run this command in your terminal.
 
With this command you launch a watch event on your CSS file, when the file is changed, it will run the CSS task.
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
How to merge multiple CSS file into 1 file
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var concatCss = require('gulp-concat-css');

gulp.task('css', function() {
    gulp.src([
        'src/css/style.css',
        'src/css/second.css'
    ])
        .pipe(concatCss("bundle.css"))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/resoure/css'))
        .pipe(browserSync.stream());
});

gulp.task('default', ['css'], function () {
    gulp.watch('src/css/style.css', ['css']);
});
Add the gulp-concat-css package
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Run this command
 
$ gulp
Run this command in your terminal.
 
With this command, the CSS will be merged to 1 file, then will be minified and copieëed to the 'dist/resource/css' folder. After this the watch event will be launched.
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
How to refresh the browser automatically
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frontend Workflow #2: CSS Automation</title>
    <link rel="stylesheet" href="dist/resoure/css/bundle.css">
</head>
<body>
    <h1>Frontend Workflow #2: CSS Automation</h1>
    <p>This cool page is awesome</p>
</body>
</html>
Create a index.html
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var concatCss = require('gulp-concat-css');
var browserSync = require('browser-sync').create();

gulp.task('css', function() {
    gulp.src([
        'src/css/style.css',
        'src/css/second.css'
    ])
        .pipe(concatCss("bundle.css"))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/resoure/css'))
        .pipe(browserSync.stream());
});

gulp.task('serve', function() {
    browserSync.init({
        server: "./"
    });
});

gulp.task('default', ['serve', 'css'], function () {
    gulp.watch('src/css/*.css', ['css']);
    gulp.watch('./index.html').on('change', browserSync.reload);
});
Add the browser-sync package
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Run this command
 
$ gulp
Run this command in your terminal.
 
Now the localhost will be started, the CSS task run after this. When it is done there is an localhost and IP address in the terminal you can copy/paste in your browser.
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Change your CSS and HTML
 
From now on, the browser will automatically refresh.
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#2

 
Mobile device refresh
 
For refreshing the website on a mobile device, connect to wifi and use the IP-address in the terminal
 
By Raymon Schouwenaar
 
Thanks for watching the video and Good luck!
 

Frontend Workflow #2: CSS Automation with GulpJS

By Raymon Schouwenaar

Made with Slides.com

Frontend Workflow #2: CSS Automation with GulpJS

  • 1,671

More from Raymon Schouwenaar