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

Automatizando tarefas com npm scripts

Automatizando tarefas com npm scripts

Nessa talk tentei fazer uma análise aprofundada dos tasks runners e seus problemas em contrapartida apresentando como alternativa aos automatizares populares, os npm scripts.

Talk apresentada no 12º meetup do grupo FloripaJS.

Luís Fernando Guedes

August 20, 2016
Tweet

More Decks by Luís Fernando Guedes

Other Decks in Programming

Transcript

  1. gulp + gulp-jshint 195 deps (5.9MB) + 102 deps (4.4MB)

    297 deps (10.3MB) grunt + grunt-contrib-jshint 89 deps (7.0MB) + 38 deps (4.9MB) 127 deps (11.9MB)
  2. “A medida que os sistemas crescem eles invadem o espaço

    dos outros sistemas.” “Sistemas tendem a se expandir para preencher todo o universo conhecido.” John Gall, A Bíblia dos Sistemas
  3. const gulp = require('gulp'); const jshint = require('gulp-jshint'); gulp.task('hint', function()

    { return gulp.src('src/**/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) }); gulp grunt module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['src/**/*.js'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint']); };
  4. "scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server

    -a localhost -p 8000 -c-1 ./app", "pretest": "npm install", "test": "karma start karma.conf.js", "test-single-run": "karma start karma.conf.js --single-run", "preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update", "preprotractor": "npm run update-webdriver", "protractor": "protractor e2e-tests/protractor.conf.js", "update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-l oader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js. map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readF ileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_ LOADER_START@@\\n'+loaderText+' //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\"" }
  5. comandos padrões prepublish: antes do npm ser publicado (também quando

    o comando npm install é executado sem argumentos). publish, postpublish: após o npm ser publicado. preinstall: antes da instalação de npms install, postinstall: após a instalação de npms preuninstall, uninstall: antes da desinstalação de um npm postuninstall: após o pacote ser instalado pretest, test, posttest: com o comando test prestop, stop, poststop: com o comando stop prestart, start, poststart: com o comando start prerestart, restart, postrestart: com o comando restart, nota: se nenhum script de restart for definido ele executará os scripts stop/start.
  6. executar sass? sim! node-sass --output-style compressed -o dist/css src/scss "scripts":

    { "scss": "node-sass --output-style compressed -o dist/css src/scss" } npm run scss
  7. executar postcss+ap? sim! $ postcss -u autoprefixer -r dist/css/* "scripts":

    { "autoprefixer": "postcss -u autoprefixer -r dist/css/*" } $ npm run autoprefixer
  8. executar uglify? sim! $ mkdir -p dist/js && uglifyjs src/js/*.js

    -m -o dist/js/app.js "scripts": { "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js" } $ npm run uglify
  9. executar browser-sync? sim! $ browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'

    "scripts": { "serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'" } $ npm run serve
  10. "scripts": { "serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'", "build":

    "npm run build:css && npm run build:js", "build:css": "npm run scss && npm run autoprefixer", "scss": "node-sass --output-style compressed -o dist/css src/scss", "autoprefixer": "postcss -u autoprefixer -r dist/css/*", "build:js": "npm run lint && npm run uglify", "eslint": "eslint src/js", "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js" }
  11. browser-sync + eslint + uglify + autoprefixer + scss npm

    scripts 436 deps (58.1MB) gulp + plugins 997 deps (77.1MB)
  12. "config": { "cssSrc": "src/scss", "cssDist": "dist/css", "jsSrc": "src/js", "jsDist": "dist/js",

    }, "scripts": { "serve": "browser-sync start --server --files '$npm_package_config_cssDist/*.css, $npm_package_config_jsDist/*.js'", "build": "npm run build:css && npm run build:js", "build:css": "npm run scss && npm run autoprefixer", "scss": "node-sass --output-style compressed -o $npm_package_config_cssDist $npm_package_config_cssSrc", "autoprefixer": "postcss -u autoprefixer -r $npm_package_config_cssDist/*", "build:js": "npm run lint && npm run uglify", "eslint": "eslint $npm_package_config_jsSrc", "uglify": "mkdir -p $npm_package_config_jsDist && uglifyjs $npm_package_config_jsSrc/*.js -m -o $npm_package_config_jsDist/app.js" }
  13. dicas + boas práticas mantenha a sanidade agrupando tarefas npm

    scripts amam shell comandos pre/pos & e &&