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
  		.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.

• 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']);
  });

  In this example, I’m watching all the javascript and sass files, so gulp can execute the task made

• gulp.src:
  Sets the files we are going to use.

Installation

In order to install and use gulp, you need to make sure you have it globally:

$ npm install -g gulp

The next step is add gulp into the project:

$ npm install --save-dev gulp

Ta-da! You are ready to use gulp! Now, you will definitely need other dependacies, which you install the same way you install gulp:

$ npm install --save-dev gulp-sass

Useful Tasks

You can use browserify to bundle all the selected javascript files into one file, babelify to compile jsx and es6 to es5, and finally, uglify to compile everything into a minified file.

gulp.task('scripts', () => {
	return browserify({
			debug: true,
			entries: [paths.src.scripts + '/app.js']
		})
		.transform("babelify", {
			presets: ["es2015", "react"]
		})
		.bundle()
		.pipe(source('app.js'))
		.pipe(streamify(uglify()))
		.pipe(streamify(rename({
			suffix: ".min"
		})))
		.pipe(gulp.dest(paths.build.scripts));
});

Compile SASS to CSS.

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()));
});

Configure JSHint task to check selected files.

gulp.task('jshint', function() {
	var assets = _.union(
		defaultAssets.server.gulpConfig,
		defaultAssets.server.allJS
	);

	return gulp.src(assets)
		.pipe(plugins.jshint())
		.pipe(plugins.jshint.reporter('default'))
		.pipe(plugins.jshint.reporter('fail'));
});

Start the server.

gulp.task('server:start', () => {
	server.listen({
		path: paths.entryScript
	});
});

Restart the server.

gulp.task('server:restart', server.restart);
});

And so much more! Gulp seems easy to understand, but it can get complex (which I haven’t reached yet). Considering that this is the first task runner I use, I find it very useful and impressed with what we can do with it. I hope you managed to understand gulp basics. Please let me know if you have any comments, questions, or any recommendations.