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
.pipe(gulp.dest(paths.build.sass)
.pipe(livereload()));
});
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.
Sets the output file.
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']); });