A front end application required a lot of task from designing the application to deployment application. Some of very common task are watching for any file change , minifying the code,
compiling the code and combining the modular code. Before task runner came to the picture there was few tools to do the job.One of them was google's Closure compiler , which was a
java application. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes code. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.
There was many other way to minimize the JavaScript files , but all of them have their own limitations. When writing a big application one need an automatic task runner which can run through all the files compile them and produce a single source code file
When we think about task runner the first two name come in our mind are Gulp and Grunt. Grunt and Gulp both are pretty similar , both works in the nodeJs environment.
Grunt is been around from longer time so the grunt community is big and you will find alot of plugins for the grunt. But there is some pitfalls in Grunt , and gulp started addressing the issue in grunt.
The common issue one face with Grunt is
1. It runs multiple task at one time where as Gulp is design in such a way that it runn one task at a test_no_validator_added_to_plan_with_mandatory_true
2. Grunt can not perform basic task like file watching himself and requires plugin for the search_meta
3. Gulp provides clean code and easy to maintain task.
Prerequisite
Install node.js. Nodejs is availbale for window , ubuntu and mac. Download nodejs from http://nodejs.org/download/
Once Nodejs has installed . Check the version of the nodejs. enter the command
- cd /Users/ashish/Documents/javascourseblog.com/gulp/demo/
- node -v
It must print the version of the node. If its not printing node version try to reinstall nodejs
Check the version of the using
- npm -v
Now install the gulp
- npm install -g gulp
This will install gulp globally. -g stands for the global installation of the any npm package
If you get the EACCES error please login using super user. In debian you can use command su.
Now lets go to the project directory using command line and hit the command
- npm init
Enter the name version description and all other data . If you dont want to be specific press enter enter till the end.
This will create a package.json file inside your project folder.
Now install gulp locally. It is recommended to install gulp locally and globaly both.
- npm install --save-dev gulp
The flag --save-dev help to save package as dev dependecies in package.json.
It helps in managing the packages for the projectin dev environment and production environment
First task in gulp
create a file gulpfile.js in root of projectand open it and paste these lines in it
Now save the file. And run the command
- gulp helloWorld
If you want to run all the task you created then you need to create a default task. add these lines in the code
Now run the command
- gulp
It will first run the default task. We have injected helloWorld as dependent task of the default , So it will run the helloWorld also.
So your final gulpfile.js will look like this
Conclusion
In this article we have seen
1 . Installation of Node and Npm
2. Task managers in front end application
3. Installation of gulp
4. Creating a task in gulp
5. running many task one after another in gulp
0 comments:
Post a Comment
...