gulp - Gulpfile js - gulp sass - gulp tutorial - learn gulp

gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs

What is Gulp JS used for?

• Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow.
• You can compile sass files, uglify and compress js files and much more.
• The kicker for gulp is that its a streaming build system which doesn't write temp files.
• Like Grunt, Gulp has a namesake configuration file called gulpfile.js that defines all of the required plugins along with the tasks you'll be running.

learn gulp tutorial - gulpjs file - gulp example

Declare Dependencies and Create Tasks

• You’ll need to create a file called into the root of your project folder.
• The syntax is straightforward and terse making it very readable and easily understandable:

var gulp = require('gulp'),
var gutil = require('gulp-util'),
var uglify = require('gulp-uglify'),
var concat = require('gulp-concat');	

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• This simply tells Gulp which plugins are required to complete the defined tasks.
• Next up, we need to define the tasks that will be run by Gulp. In my case, I'm looking to do two things:
• Compress images
• Minify my JavaScript files
• Defining a task is for all intents a JavaScript call. We use the Gulp method task() to define the task we want to run:

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• Looking at the code above, there's a mix of method calls from the plugins I specified as required.
• The first method, task(), takes a semantic name for the task (in this case ‘js') and an anonymous function which contains the real meat. Let's breakdown the code:

gulp.src('./js/*.js')	

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• The src() method let's me specify where to find the JavaScript files I'd like to compress and turns them into a stream representing a file structure that can be passed to the plugins for processing.
• This is part of Node.js' Streams API and one of the reasons for Gulp's ability to have such a terse, concise API syntax

pipe(uglify())	

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• The pipe() method takes the source stream derived from the src() method and passes it to the specific plugin being referenced.
• In this example, the uglify plugin would receive the source stream.

pipe(concat('all.js'))	

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• Like uglify, the concat plugin receives the source stream via the pipe() method and concatenates all JavaScript files into one file called "all.js"

.pipe gulp.dest ( ('./js'));	

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• Finally, using Gulp's dest() method, all.js is written to my target folder. The process if very straightforward and very readable.
• The last thing we need to do is update the default Gulp task to run our "js" task.

gulp.task('default', function(){
    gulp.run('js'); 
});

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• By going back to the command line and typing in 'gulp', Gulp finds the gulpfile.js file, loads any required plugins and dependencies, kicks off the default task and runs my 'js' task.
• You can see the end result here of the minification and concatenation of my jQuery JavaScript file:

learn gulp tutorial - gulpjs file - gulp example

• Taking this a step further, Gulp also provides another method called watch() which provides a means for automatically checking a specific resource for changes.
• This allows for great automation of tasks versus constantly having to manually type in 'gulp' at the command line.

gulp.watch('./js/*', function () {
     gulp.run('js');
});

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Copy Code

• When this runs, Gulp will continue to monitor the specified directly for changes to files and if a change occurs, will re-run the 'js' task to minify and concatenate the JavaScript files.

gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs , gulp serve , npm gulp , gulp less , npm save dev , gulp imagemin , gulp clean , gulp livereload , gulp command not found , gulp dest , gulp copy , npm watch , gulp build , gulp connect , npm sass , gulp if , gulp scss , gulp minify js , browserify gulp , gulp jshint , gulp pipe , npm install save dev , npm install dev gulped meaning , js uglify , gulp bower , gulp plugins , gulp definition , gulp start , compilation pipe , gulp changed , install gulp windows , gulp npm , gulp cli , gulp angular , gulp run , gulp version , gulp wiki , gulp file , define gulp , gulp path , run gulp , typescript gulp , gulp concat css , javascript pipe , sass gulp , install gulp ubuntu , what is gulp js , gulp command