GRUNT
Install Grunt and usage
1. Install the command-line interface
2. With the command line, navigate to the folder where you want to run grunt; such as a web application or website folder.
3. Install Grunt locally
4. Make a simple grunt file called gruntfile.js
module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['test.js'], options: { globals: { jQuery: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['jshint']); console.log('File Changed'); };
5. Make a simple package.json file or run the command ‘npm init’ to make it from the command line. Below is an example of a package.json file with all desired and required dependencies.
{ "name": "Test-Project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-jshint": "^1.0.0", "grunt-contrib-uglify": "^2.0.0", "grunt-contrib-watch": "^1.0.0", "grunt-livereload": "^0.1.3" } }
Here is how dependencies can be installed.
GULP
Here is how to get up in running with Gulp.
Install globally just as you would Grunt.
Go to desired folder.
Create a simple package.json file or run the command ‘rpm init’ to create it in the command line. See sample package.json file below.
{ "name": "test", "version": "0.1.0", "devDependencies": { } }
Install Gulp locally
Create a file called gulpfile.js and add your desired task(s). Sample gulpfile shown below.
var gulp = require('gulp'); livereload = require('gulp-livereload'); gulp.task('watch', function () { livereload.listen(); gulp.watch('test/*.html').on('change', function(file) { livereload.changed(file.path); console.log('File Changed'); gutil.log(gutil.colors.yellow('HTML file changed' + ' (' + file.path + ')')); }); });
Add required dependencies. Doing this will automatically modify package.json too.
Here is how package.json will look after dependencies are installed.
{ "name": "my-project", "version": "0.1.0", "devDependencies": { "gulp": "^3.9.1", "gulp-concat": "^2.6.0", "gulp-livereload": "^3.8.1", "gulp-watch": "^4.3.9" } }
Le’t run the watch task and see the console change when any html file in the test folder is modified.
© 2018 ALL Rights Reserved | Sitemap
Vancouver | North Vancouver | Burnaby | Richmond | Coquitlam | Port Coquitlam | Surrey | Langley | Maple Ridge | Mission | Abbotsford | Kamloops | Kelowna | Victoria | Squamish | Whistler | Pemberton