You are currently viewing Gulp Task Automation for Beginners

Gulp Task Automation for Beginners



You will learn how automate all your web development tasks with Gulp. In this video we will be compiling Sass files to CSS and then minifying the CSS for production.

🔗Install node: https://nodejs.org
🔗Install Gulp: https://gulpjs.com/

Install Gulp Packages:
🔗Sass: https://www.npmjs.com/package/gulp-sass
🔗Css uglify: https://www.npmjs.com/package/gulp-uglifycss

🎶Music by: Nicolai Heidlas Music – With you
https://soundcloud.com/nicolai-heidlas

⭐️Tutorial from iEatWebsites. Check out their channel for more great tutorials: https://www.youtube.com/channel/UC0o60y3FtVy3M93JcDFVreA

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 25 Comments

  1. Rafi Miazi

    GULP COMMAND NOT FOUND???
    Just copy and paste the command in gitbash " npm install –global gulp-cli "
    END OF PROBLEM

  2. Hi, for 2020 gulpfile.js should be upgraded to :

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var uglifycss = require('gulp-uglifycss');
    var clean = require('gulp-clean');

    sass.compiler = require('node-sass');

    gulp.task('sass', function () {
    return gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
    });

    gulp.task('css', function () {
    return gulp.src('./css/*.css')
    .pipe(uglifycss({
    "maxLineLen": 80,
    "uglyComments": true
    }))
    .pipe(gulp.dest('./dist/'));
    });

    gulp.task('clean', function () {
    return gulp.src('dist', {read: false})
    .pipe(clean());
    });

    gulp.task('run', gulp.series('sass','css'));
    gulp.task('watch', function(){
    gulp.watch('./sass/*.scss', gulp.series('sass'));
    gulp.watch('./css/*.css', gulp.series('css'));
    });
    gulp.task('default',gulp.series('watch'));

    /*'P.S. If you will run command "gulp" command in your terminal or cmd, gulpfile will run few tasks :
    1) "sass" – will compile your sass code into css code
    2) "css'" – will compile your css code to dist folder, these commands will be re-runs till you push "Ctrl+C" in your terminal, thanks to "watch" command*/

  3. Anjum Rizwi

    Excellent tutorial for beginners and who is new in sass

  4. Eddie - E11World

    Great video.
    Can you show us how to use purgecss or something similar with gulp (trying to use it but I have paths as var and all css stuff in function so the usual pipe content thing they have in documentation is not working for me). Thank you so much

  5. Mario Ramalho

    Just as a suggestion, there is a extension on VS Code editor that just works fine without so many configurations. So try it out.

  6. Lucas Simoni

    💁‍♂️ "npm init –y" instead of hitting enter several times. It will enter the default values for you without prompting to change it.

  7. mau BG

    why would they use gulp if they dont know what nodejs is?

  8. Daniel Krajnik

    9:30 wouldn't **/*.sass be the same as *.sass ? (plus recurse into any other folders)

  9. Joseph Joy

    clear instructions and nice tutorial Good Job

  10. dennis mohaaa

    Incase you are using gulp 4 and you get errors, then this is how you go about it

    const gulp = require('gulp');
    const sass = require('gulp-sass');
    var uglifycss = require('gulp-uglifycss');

    gulp.task('sass',()=>{
    return gulp.src('./sass/index.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('./css'));
    })

    gulp.task('css', function (done) {
    gulp.src('./css/*.css')
    .pipe(uglifycss({
    // "maxLineLen": 80,
    "uglyComments": true
    }))
    .pipe(gulp.dest('./dist/'));
    done();
    });

    gulp.task('run',gulp.series('sass','css'))

    gulp.task('watch',function(){
    gulp.watch('./sass/index.scss',gulp.series('sass'))
    gulp.watch('./css/*.css', gulp.series('css'));
    })

    gulp.task('default',gulp.series('run','watch'))

  11. Ganesh Kolase

    Thanks for the video. Really great demonstration and explanation

  12. This is how we setup our project

    npm install gulp-cli -g
    npm install gulp -D

    Then go to your project folder

    npm init -y
    touch gulpfile.js

    We are ready to proceed 🙂

    To look for gulp commands and help
    gulp –help

  13. Mattias

    I don't get it. So gulp(1) is just a bad alternative to the standard tool make(1), with built in inotifywait(1)? Why not just make(1) and inotifywait(1), or extend make(1) with inotify(7) support?

  14. Dave

    coding needs to be updated to Gulp 4.0. Otherwise, thanks for the nice tutorial.

  15. Dieter Jaut

    My Way + I Wanna Be Sedated – Nina Hagen & Snap Her live in New York 1995 – YouTube

  16. Great tutorial,thank you very much!
    Everything was fine, but there was a problem when I was writing gulp ('gulp' is not recognised)…why?

  17. Dimka

    Thanks, man ! I am happy that Ive opened Gulp for myself. Its like to go to a new level of web- developing xD

Leave a Reply