Gulp

gulp.md

gulp

É uma ferramenta para automatizar tarefas utilizando javascript e executa na plataforma Node.js. São extensíveis e funcionam por meio de pu\lugins.

Instalando gulp

sudo npm install -g gulp-cli

sudo npm install gulp --save-dev

gulp --version

Criação do gulpfile.js básico

var gulp = require('gulp');

gulp.task('default', function(){

});

Instalando gulp-jshint

npm install jshint gulp-jshint --save-dev

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

//O return para retornar uma promisse
gulp.task('jshint', function(){
    return gulp.src('js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp.task('default', ['jshint']);

Instalando gulp-clean

npm install jshint gulp-clean --save-dev

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

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

gulp.task('clean', function(){
    return gulp.src('dist/')
    .pipe(clean());
});

gulp.task('default', ['jshint']);

Instalando gulp-uglify

npm install jshint gulp-uglify --save-dev

npm install jshint gulp-concat --save-dev

npm install jshint event-stream --save-dev

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var es = require('event-stream');

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

gulp.task('clean', function(){
    return gulp.src('dist/')
    .pipe(clean());
});

gulp.task('uglify', ['clean'], function(){
    return 
	es.merge( [gulp.src(['bower_components/angular/angular.min.js']),
    gulp.src(['js/**/*.js']).pipe(uglify()) ])
    .pipe(concat('script.js'))
    .pipe(gulp.dest('dist/js'))
});

gulp.task('default', ['jshint', 'uglify']);

Instalando gulp-htmlmin

npm install jshint gulp-htmlmin --save-dev

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var es = require('event-stream');
var htmlmin = require('gulp-htmlmin');

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

gulp.task('clean', function(){
    return gulp.src('dist/')
    .pipe(clean());
});

gulp.task('uglify', ['clean'], function(){
    return 
	es.merge( [gulp.src(['bower_components/angular/angular.min.js']),
    gulp.src(['js/**/*.js']).pipe(uglify()) ])
    .pipe(concat('script.js'))
    .pipe(gulp.dest('dist/js'))
});

gulp.task('htmlmin', function(){
    return gulp.src('view/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/view'));
});

gulp.task('htmlmin', function(){
    return gulp.src('view/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/view'));
});


gulp.task('default', ['jshint', 'uglify', 'htmlmin']);

Finalizando

npm install jshint gulp-clean-css --save-dev

npm install jshint run-sequence --save-dev

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var es = require('event-stream');
var htmlmin = require('gulp-htmlmin');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var runSequence = require('run-sequence');

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

gulp.task('clean', function(){
    return gulp.src('dist/')
    .pipe(clean());
});

gulp.task('uglify', ['clean'], function(){
    return 
	es.merge( [gulp.src(['bower_components/angular/angular.min.js']),
    gulp.src(['js/**/*.js']).pipe(uglify()) ])
    .pipe(concat('script.js'))
    .pipe(gulp.dest('dist/js'))
});

gulp.task('htmlmin', function(){
    return gulp.src('view/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/view'));
});

gulp.task('htmlmin', function(){
    return gulp.src('view/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/view'));
});

gulp.task('cssmin', function(){
    return gulp.src(['css/*.css'])
    .pipe(cleanCSS())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('dist/css'));
});

//O copy nao precisa de plugin
gulp.task('copy', function(){
    return gulp.src(['index-prod.html'])
    .pipe(rename('index.html'))
    .pipe(gulp.dest('dist/'));
});

//Para fazer um encadeamento
//Ela apura o tempo total
gulp.task('default', function(cb){
     return runSequence('clean',['jshint', 'uglify', 'htmlmin', 'cssmin', 'copy'], cb);
});

Instalando plugins

sudo npm install jshint gulp-jshint gulp-clean gulp-concat gulp-uglify event-stream gulp-htmlmin gulp-rename gulp-clean-css run-sequence  --save-dev

Relatório em Html

sudo npm install gulp-jshint-html-reporter --save-dev

.pipe(jshint())
.pipe(jshint.reporter('gulp-jshint-html-reporter', {
      filename: __dirname + '/jshint-output.html',
      createMissingFolders : false  
 }));