Gulp is a task runner which uses Node.js. For example concats javascript and CSS, minifies CSS and javascript.
Gulp has 5 functions:
1. gulp.task(name, function(){ ... })
It registers the function with a name.
2. gulp.run(tasks...)
Runs all tasks with maximum concurrency.
3. gulp.watch(glob, function(){})
Runs a function when a file that matches the glob changes.
4. gulp.src(' ')
Takes a file system glob and starts emitting files that match and returns a readable stream. This is piped to other streams.
5. gulp.dest(folder):
This returns a writable stream. File objects piped to this are saved to the file system.
Installing Nodejs:
Node is a program using the Google Chrome’s V8 JavaScript engine, which can parse and execute code written in JavaScript.
Installing npm:
npm is the default package manager for Node.js. It also allows users to install Node.js applications that are available on the npm registry.
Use npm to install npm modules
Install Gulp:
Install gulp using -g at the end so gulp will available for all ur projects.
To install gulp in local environment.
Lets check whether they installed are not
$ npm -v
1.3.10
$ gulp -v
[11:50:15] CLI version 3.8.10
[11:50:15] Local version 3.8.10]
Now we need to install and configure plug-ins to perform specific tasks by using gulp.
To concatinate all source javascript or css files.
Uglify package implements a general-purpose JavaScript parser/compressor/beautifier toolkit. A code generator which outputs JavaScript code from an AST, also providing the option to get a source map
Strip-debug Useful for making sure you didn't leave any logging in production code.
I think you installed everything perfectly without any problem.
copy below gulpfile.js in your project directory.
// include gulp var gulp = require('gulp'); // include plug-ins to do task. gulp-concat, gulp-uglify,gulp-strip-debug var concat = require('gulp-concat'); var stripDebug = require('gulp-strip-debug'); var uglify = require('gulp-uglify'); // Task to concat all JS files, strip debugging and minify gulp.task('scripts', function() { gulp.src('js/*.js') // define source directory where ur js files .pipe(concat('script.js')) //define concatination & name for out put file .pipe(stripDebug()) //Useful for making sure you didn't leave any logging in production code. .pipe(uglify()) // make outputfile compress/beautifier .pipe(gulp.dest('js/dest/')); // define destination dir to store files });
Run gulp file using
Thats it just above little code made your all javascript files code in one single file.
Change .Less files to .css
//include gulp-less var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('lesscss', function(){ gulp.src('style/*.less') .pipe(less('stylecss.css')) .pipe(gulp.dest('style/css/')); });
Run using below command
Concate all css files.
gulp.task('css', function() { gulp.src('css/*.css') .pipe(concat('styles.css')) .pipe(minifyCSS()) // by compleate css will be in single line .pipe(gulp.dest('css/styles/')); });
Above all gulp tasks can be run in single gulp command, For that at the end of the file add default tasks to gulpfile.js.
gulp.task('default', ['lesscss','css','scripts'], function() {});
For all gulp plugins visit http://gulpjs.com/plugins/
Happy Coding.
Micropyramid is a software development and cloud consulting partner for enterprise businesses across the world. We work on python, Django, Salesforce, Angular, Reactjs, React Native, MySQL, PostgreSQL, Docker, Linux, Ansible, git, amazon web services. We are Amazon and salesforce consulting partner with 5 years of cloud architect experience. We develop e-commerce, retail, banking, machine learning, CMS, CRM web and mobile applications.
Django-CRM :Customer relationship management based on Django
Django-blog-it : django blog with complete customization and ready to use with one click installer Edit
Django-webpacker : A django compressor tool
Django-MFA : Multi Factor Authentication
Docker-box : Web Interface to manage full blown docker containers and images
More...