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
GULP COMMAND NOT FOUND???
Just copy and paste the command in gitbash " npm install –global gulp-cli "
END OF PROBLEM
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*/
Excellent tutorial for beginners and who is new in sass
This video needs a playlist or index.
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
"What's going on guys?" 🙄 Next!
Why did you not metnion anything about JS in Gulp??
Just as a suggestion, there is a extension on VS Code editor that just works fine without so many configurations. So try it out.
💁♂️ "npm init –y" instead of hitting enter several times. It will enter the default values for you without prompting to change it.
why would they use gulp if they dont know what nodejs is?
9:30 wouldn't **/*.sass be the same as *.sass ? (plus recurse into any other folders)
clear instructions and nice tutorial Good Job
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'))
Thanks for the video. Really great demonstration and explanation
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
Where is livereload?
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?
coding needs to be updated to Gulp 4.0. Otherwise, thanks for the nice tutorial.
Thank you so much. It's so useful for beginners like me. 🙂
very nice..
My Way + I Wanna Be Sedated – Nina Hagen & Snap Her live in New York 1995 – YouTube
https://www.youtube.com/watch?v=BkN9lnCcSZc
Great tutorial,thank you very much!
Everything was fine, but there was a problem when I was writing gulp ('gulp' is not recognised)…why?
Thanks, man ! I am happy that Ive opened Gulp for myself. Its like to go to a new level of web- developing xD
even on speed 2x – you are slow FFkk,