Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workflow para desenvolvimento web e mobile usan...

Workflow para desenvolvimento web e mobile usando gruntjs

Davidson Fellipe

May 31, 2014
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. ANT MAKEFILE <target name="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js-

    compile"> <echo>Compiling JS files in ${input.scripts.dir} in closure...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg line="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js" /> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished compiling JS files</echo> </target> xml http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  2. <3

  3. grunt.js fácil de usar grande número de plugins imensa comunidade

    open source via linha de comando usa node.js
  4. $ make grunt-config MAKEFILE grunt-config: @brew install node; #node @sudo

    curl https://npmjs.org/install.sh -k|sh;#npm @sudo npm install -g grunt-cli; #grunt @npm i --save-dev #dependencias make
  5. package .json { "name": "poll", "version": "0.0.1", "devDependencies": { "grunt":

    "~0.4.2", "grunt-contrib-watch": "~0.5.3", "load-grunt-tasks": "~0.2.0", "grunt-shell": “~0.6.1" } } js
  6. Gruntfile .json module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),
 


    pathSrc: 'src/', pathBuild: 'build/', compass: {}, shell: {} }); ! grunt.loadNpmTasks(‘grunt-contrib-compass’); grunt.loadNpmTasks(‘grunt-contrib-shell’); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.registerTask('build', ['compass:min', 'shell']); ! }; js
  7. Gruntfile .json module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),
 


    pathBase: 'static/poll/', compass: {}, minify: {}, uglify: {}, shell: {} }); // Load all tasks require('load-grunt-tasks')(grunt); grunt.registerTask('build', ['compass:min', 'uglify', 'shell']); }; js
  8. $ grunt compass:dev MAKEFILE grunt.initConfig({ compass: { dev: { options:

    { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); js
  9. $ grunt compass:prod MAKEFILE grunt.initConfig({ compass: { dev: { /*

    ... */ }, prod: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true }}}}); js
  10. $ grunt watch MAKEFILE grunt.initConfig({ watch: { build: { files:

    [‘src/**/*.{scss, sass, js}'], tasks: [ 'compass:dev', 'concat', 'uglify' ] } } }); js
  11. newer:nomeDaTask MAKEFILE grunt.initConfig({ watch: { build: { files: [‘src/**/*.{scss, sass,

    js}'], tasks: [ 'newer:compass:dev', 'newer:concat', 'newer:uglify' ] } } }); js
  12. $ grunt csslint MAKEFILE csslint:{ lax: { options: { csslintrc:

    '.csslintrc' }, src: ['css/*.css'] } }; js
  13. $ grunt uglify MAKEFILE uglify: { dist: { files: {

    'js/all.min.js': ['js/all.js'] } } }; js
  14. $ grunt imagemin MAKEFILE imagemin: { dist: { files: [{

    expand: true, cwd: 'img', src: '{,*/}*.{png,jpg,jpeg}', dest: 'img' }]}}; js
  15. $ grunt complexity MAKEFILE complexity: { src: ['<%= path %>js/*.js’],

    options: { breakOnErrors: true, errorsOnly: false, cyclomatic: [4, 8, 12], halstead: [10, 15, 20], maintainability: 100, hideComplexFunctions: false }} js
  16. $ grunt complexity MAKEFILE Running "complexity:generic" (complexity) task ✗ src/js/c.js

    ███ 82.923 ✗ src/js/c.js:11 - <anonymous>.init is too complicated Cyclomatic: 21 Halstead: 105.1875 | Effort: 1.5177e+5 | Volume: 1442.9 | Vocabulary: 17 ✓ src/js/b.js ███████ 141.28 js
  17. grunt-phonegap npm install phonegap -g wrapping para Phonegap 3.0 CLI

    https://github.com/logankoester/grunt-phonegap
  18. $ grunt phonegap MAKEFILE phonegap: { config: { root: 'www',

    config: 'www/config.xml', cordova: '.cordova', html : 'index.html', // (Optional) You may change this to any other.html path: 'phonegap', cleanBeforeBuild: true // when false the build path doesn't get regenerated plugins: ['/local/path/to/plugin', 'http://example.com/path/to/plugin.git'], platforms: ['android'], maxBuffer: 200, // You may need to raise this for iOS. verbose: false, releases: 'releases', releaseName: function(){ var pkg = grunt.file.readJSON('package.json'); return(pkg.name + '-' + pkg.version); } debuggable: false, js