npm

> choco install nodejs.install

> cd c:\my\path

# cria packages.json
> npm init

//packages.json
{
  "name": "brownbag",
  "version": "1.0.0",
  "description": "teste"
}

> npm install {pacote}
# atalho
> npm i {pacote}

Instalando um pacote

normal

> npm install --global {pacote}
# atalho
> npm i -g {pacote}

Instalando um pacote

global

> npm install --save {pacote}
# atalho
> npm i -S {pacote}

Instalando um pacote

dependência

{
  "name": "brownbag",
  "version": "1.0.0",
  "description": "teste",
  "dependencies": {
    "gulp": "^3.8.10"
  }
}

> npm install --save-dev {pacote}
# atalho
> npm i -D {pacote}

Instalando um pacote

dependência de desenvolvimento

{
  "name": "brownbag",
  "version": "1.0.0",
  "description": "teste",
  "devDependencies": {
    "gulp": "^3.8.10"
  }
}

bower

npm i -g bower

> cd c:\my\path

# cria bower.json
> bower init

//bower.json
{
  "name": "brownbag",
  "version": "1.0.0",
  "description": "teste"
}

> bower install {pacote}
# atalho
> bower i {pacote}

Instalando um pacote

normal

Instalando um pacote

DEPENDÊNCIA

> bower install --save {pacote}
# atalho
> bower i -S {pacote}

{
  "name": "brownbag",
  "version": "1.0.0",
  "description": "teste",
  "dependencies": {
    "jquery": "~2.1.1"
  }
}

Instalando um pacote

dependência de desenvolvimento

> bower install --save-dev {pacote}
# atalho
> bower i -D {pacote}

{
  "name": "brownbag",
  "version": "1.0.0",
  "description": "teste",
  "devDependencies": {
    "jasmine": "~2.1.2"
  }
}

Instalando um pacote

# github
> bower i jquery/jquery
# git
> bower i git://bitbucket.com/user/package.git
# url
> bower i http://example.com/script.js

OUTRAS FONTES

gulp

npm i -g gulp

> cd c:\my\path
> npm i -D gulp

var gulp = require('gulp');

gulp.task('default', function() {
    //do stuff
});

• less

  • compilar

  • prefixos

  • concatenar

  • minificar

• javascript

  • jslint

  • concatenar

  • minificar

LESS

compilar

npm i -D gulp-less

LESS

compilar

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function () {
  gulp.src('./app/**/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build/css'));
});

LESS

compilar

body {
  background-color: red;
  a {
    color: white;
  }
}

body {
  background-color: red;
}
body a {
  color: white;
}

app.less

app.css

LESS

prefixos

npm i -D gulp-autoprefixer

LESS

var gulp = require('gulp');
var less = require('gulp-less');
var prefix = require('gulp-autoprefixer');

gulp.task('less', function () {
  gulp.src('./app/**/*.less')
    .pipe(less())
    .pipe(prefix())
    .pipe(gulp.dest('./build/css'));
});

prefixos

LESS

PREFIXOS

body {
  background-color: red;
  a {
      color: white;
  }
}
.transition {
  transition: 0.1s;
}

body {
  background-color: red;
}
body a {
  color: white;
}
.transition {
  -webkit-transition: 0.1s;
          transition: 0.1s;
}

app.less

app.css

LESS

Concatenar

npm i -D gulp-concat

LESS

var gulp = require('gulp');
var less = require('gulp-less');
var prefix = require('gulp-autoprefixer');
var concat = require('gulp-concat');

gulp.task('less', function () {
  gulp.src('./app/**/*.less')
      .pipe(less())
      .pipe(prefix())
      .pipe(concat('app.css'))
      .pipe(gulp.dest('./build/css'));
});

Concatenar

LESS

minificar

npm i -D gulp-cssmin

LESS

var gulp = require('gulp');
var less = require('gulp-less');
var prefix = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var cssmin = require('gulp-cssmin');

gulp.task('less', function () {
  gulp.src('./app/**/*.less')
      .pipe(less())
      .pipe(prefix())
      .pipe(concat('app.css'))
      .pipe(cssmin())
      .pipe(gulp.dest('./build/css'));
});

minificar

JS

LINt

npm i -D gulp-jshint

var gulp = require('gulp');
var jshint = require('gulp-jshint');

gulp.task('js', function () {
  gulp.src('./app/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest('./build/js'));
});

JS

lint

JS

lint

var a = 1
console.log(a);

> gulp js
[19:24:24] Using gulpfile ~\Desktop\brownbag\gulpfile.js
[19:24:24] Starting 'js'...
[19:24:24] Finished 'js' after 7.28 ms
C:\brownbag\app\app.js: line 1, col 10, Missing semicolon.

1 error

app.js

var gulp = require('gulp');
var p = require('gulp-load-plugins')();

gulp.task('js', function () {
  gulp.src('./app/**/*.js')
    .pipe(p.jshint())
    .pipe(p.jshint.reporter('default'))
    .pipe(p.concat('app.js'))
    .pipe(p.uglify())
    .pipe(gulp.dest('./build/js'));
});

gulp.task('less', function () {
  gulp.src('./app/**/*.less')
    .pipe(p.less())
    .pipe(p.autoprefixer())
    .pipe(p.concat('app.css'))
    .pipe(p.cssmin())
    .pipe(gulp.dest('./build/css'));
});

grunt

npm i -g grunt-cli

> cd c:\my\path
> npm i -D grunt

module.exports = function(grunt) {
  grunt.registerTask('default', function() {
    //do stuff
  });
};

• less

  • compilar

  • prefixos

  • concatenar

  • minificar

• javascript

  • jslint

  • concatenar

  • minificar

module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      dist: {
        src: ['app/**/*.js'],
        dest: 'build2/js/app.js',
      }
    },
    uglify: {
      build: {
        src: 'build2/js/app.js',
        dest: 'build2/js/app.min.js'
      }
    },
    jshint: {
      all: ['app/**/*.js']
    }
  });
  require('load-grunt-tasks')(grunt);
  grunt.registerTask('js', ['jshint',
                            'concat',
                            'uglify']);
};

x

• + código - config
• mais rápido
• pouco I/O
• processamento em memória

• - código + config
• mais plugins
• muito I/O :(
• trabalha com arquivos em disco