Learning Gulp Basics | Javascript

In the past trimester, I was given a project of creating anything with MEAN.JS and it was the first time I used gulp, so I decided it was time to learn more about what gulp is and how does it work; with the help with a friend I understood how it worked. So now, let’s get started with gulp basics:

What is Gulp?

Gulp is a task runner and build system that uses the philosophy of code over configuration (I’m looking at you, Grunt!). At first glance, I had no idea what was happening in that gulpfile.js, but then I started reading and noticed very interesting things, like it’s simplicity for starters. You will mainly use four functions:

gulp.task: Defines a task and it’s purpose.
gulp.task('sass', function() {
	return gulp.src(paths.src.sass + 'style.scss')
		.pipe(sass()) // Converts Sass to CSS with gulp-sass

This example is taken from a chat I made for the class. I’m creating a task to compile SASS into CSS using gulp-sass dependancy. The function .pipe allows gulp to connect to other plugins/functions as you can see in the example.

  • gulp.dest:
    Sets the output file.
  • gulp.watch:
    Listes for any update in a file, if it, it can execute a task like recompiling sass.

    gulp.task('watch', () => { livereload.listen(); // Watch .js files gulp.watch(paths.src.scripts + '**/*.js', ['scripts']); // Watch .scss files gulp.watch(paths.src.sass + '**/*.scss', ['sass']); // Watch image files gulp.watch(paths.src.images + '**/*', ['images']); gulp.watch(defaultAssets.server.allJS, ['server:restart']); //server restart gulp.watch(['./app.js'], ['server:restart']); gulp.watch(['./app/client/**/*.js'], ['server:restart']); }); Read more...