This post is meant to be for those people who are tired of doing repetitive tasks in the development process. It is a basic startup guide for those who do’t use gulp, so let’s get started.
What is Gulp?
First things first. Gulp is a JavaScript task runner that lets you automate tasks, helping you in the development process.
What makes Gulp different from other task runners is that it uses Node streams, piping output from one task as an input to the next one. It reads a file once, processes it through multiple tasks, and then writes the output file. This results in faster builds because there is no need to create and read intermediary files on hard drive. Great, isn’t it?
So, what do I need to use Gulp?
You need Node installed on your computer to begin the gulp installation.
If you don’t have Node installed, please go to https://nodejs.org/.
Here’s how to do it:
1. Create packages.json for npm configuration executing the following command:
> npm init
2. Install and add gulp devDependencie using node with the following command:
> npm install
This command will install all dependencies and devDependencies.
Of course you can install any module by itself with the following command:
> npm install gulp --save-dev
3. Create gulpfile and start writing your tasks.
Sample Structure
In this sample we will have this structure folder.
Gulp configuration file
If you take a look at the file you will see app and dist, first one is the application source configuration and the other one is the distribution folder.
Start writing Gulp tasks
The main idea of the sample is creating a new folder “dist” with all the optimized code sources.
In this tasks we will join and compile less files into one css file, join js files into one js file and create a new index.htm with the right references.
Start creating a default task.
var gulp = require('gulp');
gulp.task('default', function() {
console.log('Gulp is running!')
});
If want to test default task, you only have to run the following command line:
> gulp
The result is:
The main tasks in this sample are “serve” and “clean”.
Serve task will execute compile task. On callback it use gulp-serve to run node server on callback.
Clean task its only to remove dist folder using gulp-clean.
gulp.task('serve', ['compile'], function(){
connect.server({
name: 'Dev App',
root: ['dist', 'tmp'],
port: 8086,
livereload: true
});
});
gulp.task('clean', function(){
return gulp.src(config.dist.base, {read: false})
.pipe(clean());
})
Copy files
In this sample we have two tasks to copy resources: copy-html and copy-assets.
gulp.task("copy-html", function () {
gulp.src(config.app.baseHtml)
.pipe(rename("index.html"))
.pipe(gulp.dest(config.dist.base));
});
This task will create a new html file named index and copy it to dist folder.
gulp.task("copy-assets", function(){
gulp.src(config.app.assets)
.pipe(gulp.dest(config.dist.assets));
});
This task will copy all asset folder to dist folder.
Compile node_modules
This task will contact all node_modules that you set and create one js file and other css one.
gulp.task("compile-libs", function(){
gulp.src(config.app.compiledLibsStyles)
.pipe(concat('libs.min.css'))
.pipe(gulp.dest(config.dist.libs));
gulp.src(config.app.compiledLibsScripts)
.pipe(concat('libs.min.js'))
.pipe(gulp.dest(config.dist.libs));
})
Compile less files
This task compile and join all less files into one css one.
After that, task will minify css.
gulp.task("compile-styles", function(){
return gulp.src(config.app.less)
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest(config.dist.base))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(config.dist.base));
});
Copile scripts files
This task compiles and joins all js files into a js single one.
After that task will uglify js.
For example, let’s imagine e we have two script files: the first one with an alert and the second one with an ajax call.
gulp.task("compile-scripts", function(){
gulp.src(config.app.scripts)
.pipe(concat('scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest(config.dist.scripts));
});
Inject
In this task we will add js, and css references into the new html file.
gulp.task('inject', function () {
var target = gulp.src(config.dist.indexHtml);
var sources = gulp.src(config.dist.compiledSources, {read: false});
var stream = target.pipe(inject(sources, { relative: true }))
.pipe(gulp.dest("dist"));
return stream;
});
Compile all
This task will execute copy-html, copy-libs, copy-assets, compile-scripts and compile-styles at the same time.
After that it will execute inject task.
gulp.task('compile', function(callback){
runSequence(
["copy-html", "copy-libs" , "copy-assets", "compile-scripts", "compile-styles"],
"inject",
callback);
});
Finally if you run gulp serve you will see the following output and you can browse http://localhost:8086 and see the magic!
If you want to download a sample code please follow this link
If you want to see demo online please go to link
We hope that this post can be useful!
Part 2 is coming soon and will dig deeper into gulp modules.
Thanks for reading, see you soon!
Comments are closed.