Categorias

Newsletter

  • http://chocoladesign.com/wp-content/uploads/2016/02/npm1.png
    Coding CSS HTML Javascript

    Como usar NPM como Task Runner

    Eu uso Gulp diariamente como task runner, já usei Grunt também. Mas ainda assim prefiro o Gulp. Muitas pessoas não sabem que podem usar […]


    Eu uso Gulp diariamente como task runner, já usei Grunt também. Mas ainda assim prefiro o Gulp.

    Muitas pessoas não sabem que podem usar o NPM como task runner também. Antes de mostrar como usar, tenho que falar alguns prós e contras sobre usar o NPM como Task Runner.

    Prós:

    • Fácil de usar e fácil de configurar tudo.
    • Seu projeto fica mais limpo, pois não tem tantos arquivos e nem tantas dependências.
    • Começar projetos rápidos e pequenos.

    Contras:

    • Não é escalável. Então não é recomendado usar em projetos grandes e projetos complexos ou seu package.json vai ficar confuso.
    • Pode causar alguns problemas no Shell (no caso do Windows), diferente do Gulp/Grunt que são sólidos em cross OS.

    Vamos criar um projeto simples onde compilamos nosso Jade e Sass e minifcamos nosso JS.

    Esse será seu package.json final:

    NPM Package.json

    Todas as tasks você cria no scripts. O NPM já vem com algumas Built in Tasks.

    prepublish: Run BEFORE the package is published. (Also run on local npm install without any arguments.)
    publish, postpublish: Run AFTER the package is published.
    preinstall: Run BEFORE the package is installed
    install, postinstall: Run AFTER the package is installed.
    preuninstall, uninstall: Run BEFORE the package is uninstalled.
    postuninstall: Run AFTER the package is uninstalled.
    preversion, version: Run BEFORE bump the package version.
    postversion: Run AFTER bump the package version.
    pretest, test, posttest: Run by the npm test command.
    prestop, stop, poststop: Run by the npm stop command.
    prestart, start, poststart: Run by the npm start command.
    prerestart, restart, postrestart: Run by the npm restart command. Note: npm restart will run the stop and start scripts if no restart script is provided.

    Além das Built in Tasks você pode criar as suas próprias.

    Jade:

    Seguindo o exemplo que criei, você primeiro precisa compilar seu Jade. E pra compilar, você precisa rodar:

    jade [options] [dir|file ...]

    No meu projeto eu usei:

    "jade": "jade public/views/index.jade -o dist/“

    Que no caso ele pega meu jade dentro do public/views e joga pro dist. -o é de Output.

    Agora rodando npm run jade, você terá seu Jade compilado bonitinho em HTML.

    Sass:

    O Sass é a mesma coisa que o Jade, apenas escreva no seu package.json:

    "sass": "sass public/stylesheets/main.scss dist/stylesheets/main.css --style compressed”

    e rode:

    npm run sass

    JS:

    Seguindo o mesmo padrão do Jade e Sass, escreva no seu package.json:

    "uglify -s public/scripts/main.js -o dist/scripts/main.js”

    e rode:

    npm run uglify

    Browser-sync:

    O Browser-sync é apenas pra levantar um server com live-reload e watcher nos seus arquivos pra ser tem alguma mudança.

    Ele, igual aos outros, segue o mesmo padrão.

    "server": "browser-sync start --server dist”

    E rode:

    npm run server

    Conclusão:

    Agora que temos todas nossas tasks prontas, basta usarmos o npm start (built in task) pra rodar todas as tasks de uma vez, ao invés de uma por uma.

    "start": "npm run jade && npm run sass && npm run js && npm run server”

    Agora basta rodar npm start e rodará todas as outras tasks pra você.

    Pode ver que esse processo não leva nem 3 minutos pra montar. Tudo bem que é projeto bem simples, mas ele faz o trabalho. Da pra você brincar mais, fazendo testes, lint de código etc.

    Ps: Não é algo que eu uso no dia a dia e nem pretendo usar, resolvi escrever porque muita gente não conhece ou não sabe que da pra usar o NPM como Task Runner e é sempre bom conhecer coisas novas. 🙂

    Repo: https://github.com/BuKinoshita/npm-task-runner

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • Não lembro onde li exatamente, mas é possível adicionar scripts com outras tasks a fim de que se possa modularizar mais e definir melhor as estruturas de comandos, isso muito me interessou e estou iniciando testes com o npm sem depender do gulp ou grunt.