Mais conteúdo relacionado Semelhante a Javascript is your (Auto)mate (20) Javascript is your (Auto)mate24. Grunt or Gulp
● Based on files
● Configuration over code
● 4300+ plugins
● Task runner
● Based on streams
● Code over configuration
● Build system
● 1200+ plugins
27. Grunt project
package.json
used by npm to store metadata for projects
published as npm modules
Gruntfile.js or Gruntfile.coffee
used to configure or define tasks and load Grunt
plugins
28. package.json
$ npm init
{
"name": "(auto)mate",
"version": "0.0.1",
"description": "JS is your (auto)mate",
"author": "Gianluca Esposito <g@esposi.to>",
"license": "ISC"
}
30. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Task configuration.
jshint: {
options: {
[...]
},
gruntfile: {
src: 'Gruntfile.js'
},
lib_test: {
src: ['lib/**/*.js', 'test/**/*.js']
}
},
nodeunit: {
files: ['test/**/*_test.js']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
lib_test: {
files: '<%= jshint.lib_test.src %>',
tasks: ['jshint:lib_test', 'nodeunit']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Gruntfile.js
33. // Task configuration
jshint: {
gruntfile: {
src: 'Gruntfile.js'
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
}
}
Task configuration
34. // These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Defines the default task.
grunt.registerTask('default', ['jshint']);
Loading Grunt plugins and tasks
38. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Task configuration.
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Houston...
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
}
}
{
39. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Task configuration.
jshint: require('./grunt/config/jshint'),
watch: require('./grunt/config/watch')
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Module
module.exports = {
options: {
node: true,
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
}
};
{
40. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Task configuration.
jshint: require('./grunt/config/jshint'),
watch: require('./grunt/config/watch')
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Rinse, Repeat
42. Gruntfile.js
module.exports = function(grunt) {
var path = require('path');
require('load-grunt-config')(grunt, {
// path to task.js files, defaults to grunt dir
configPath: path.join(process.cwd(), 'grunt/config')
});
};
44. WebDev workflow
$ npm install -D grunt-preprocess
grunt-contrib-clean
grunt-contrib-copy
grunt-contrib-concat
grunt-contrib-uglify
grunt-contrib-cssmin
grunt-contrib-imagemin
46. require('load-grunt-config')(grunt, {
// path to task.js files, defaults to grunt dir
configPath: path.join(cwd, 'grunt/config'),
//data passed into config. Can use with <%= var %>
data: {
src: 'src/',
dest: 'grunt/build/',
minjs: 'js/build.min.js',
mincss: 'css/build.min.css'
},
// Optionally you can use jit-grunt instead of load-grunt-tasks
jitGrunt: {
jitGrunt: true
}
Gruntfile.js
47. clean.js
module.exports = {
build: ['<%= dest %>*'],
js: [
'<%= dest %>js/*', '!<%= dest %>'+'<%= minjs %>'
],
css: [
'<%= dest %>css/*', '!<%= dest %>'+'<%= mincss %>'
]
};
$ grunt clean
51. clean.js
var dest = '<%= dest %>';
module.exports = {
build: [dest + '*'],
js: [
dest + 'js/*', '!' + dest + '<%= minjs %>'
],
css: [
dest + 'css/*', '!' + dest +'<%= mincss %>'
]
};
$ grunt clean:js
54. Bonus CLI
# Disable writing files (dry run)
$ grunt taskname --no-write
# Verbose mode. A lot more information
output
$ grunt taskname --verbose
57. http.js
var path = require('path');
var cwd = process.cwd();
module.exports = function(grunt, options) {
var dest = path.join(cwd, '<%= src %>' + '/api.json');
return {
api: {
options: {
url: 'http://www.splashbase.co/api/v1/images/latest'
},
dest: dest
}
};
};
$ grunt http
58. wget.js
$ grunt wget
module.exports = function(grunt, options) {
var dest = '<%= src %>';
var json = grunt.file.readJSON(path.join(cwd, dest + '/api.json'));
var src = [];
json.images.forEach(function(image) {
src.push(image.url);
});
return {
baseUrl: {
options: {
overwrite: true
},
src: src,
dest: dest
}
};
};