Automation build

Desenvolvedor Front-End
Autor: Ivanildo Silva

É o processo de criar
tarefas automatizadas para
criação de uma compilação
de software e os processos
associados.

Vantagens da automatização do build
● Uma pré-condição necessária para integração contínua e testes contínuos
● Melhorar a qualidade do produto
● Acelerar o processamento da compilação ou leitura
● Elimina as tarefas manuais
● Elimina as dependências
● Economize tempo e dinheiro -> Por causa das razões acima enumeradas

As dependências
nunca sobem para
produção

Ferramentas utilizadas
●
angular-mocks,
●
browser-sync,
●
gulp,
●
gulp-angular-templatecache,
●
gulp-clean-css,
●
gulp-cli,
●
gulp-concat,
●
gulp-concat-css,
●
gulp-htmlmin,
●
gulp-jshint,
●
gulp-less,
●
gulp-processhtml,
●
gulp-rename,
●
gulp-rev-easy,
●
gulp-uglify,
●
jasmine-core,
●
jshint,
●
jshint-stylish,
●
karma,
●
karma-chrome-launcher,
●
karma-firefox-launcher,
●
karma-jasmine,
●
merge-stream.

gulpfile.js – istanciando plugins
var gulp = require('gulp');
var less = require('gulp-less');
var concatCss = require('gulp-concat-css');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var merge = require('merge-stream');
var processhtml = require('gulp-processhtml');
var htmlmin = require('gulp-htmlmin');
var templateCache = require('gulp-angular-templatecache');
var reveasy = require("gulp-rev-easy");
var Server = require('karma').Server;
var browserSync = require('browser-sync').create();

gulpfile.js – Mapeando diretórios
var paths = {
appLess: ['assets/less/guardian/guardian-styles.less'],
appDependencesCss: [
‘lib/angular-material/angular-material.css’,
‘……………………………………………………….’
],
appDependencesJs: [
‘lib/angular/angular.js’,
‘………………………….’
],
appJs: [
'js/app.js',
'js/config/**/*.js',
'js/app/**/**/*.js'
],
appHtml: ['./views/**/*.html'],
build: './build'
};

gulpfile.js – Compilando CSS
var concatCss = require('gulp-concat-css');
var cleanCSS = require('gulp-clean-css');
var merge = require('merge-stream');
var less = require('gulp-less');
gulp.task('compile-style-prod', function (done) {
var lessStream = gulp.src(paths.appLess)
.pipe(less());
var cssStream = gulp.src(paths.appDependencesCss);
return merge(cssStream, lessStream)
.pipe(concatCss('app.css'))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest(paths.build + '/css/'));
});

gulpfile.js – Compilando JS
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('compile-js-prod', function () {
gulp.src(paths.appDependencesJs)
.pipe(concat('dependences.js'))
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest(paths.build + '/js'));
gulp.src(paths.appJs)
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest(paths.build + '/js'));
});

gulpfile.js – jshint: verificando possíveis erros no js
var jshint = require('gulp-jshint');
gulp.task('jshint', function () {
return gulp.src(paths.appJs)
.pipe(jshint())
.pipe(jshint.reporter('default', { verbose: true }));
});

File .jshintrc: configurando jshint
{
"curly": true,
"eqnull": true,
"undef": true,
"globals": {
"jQuery": true,
"angular":true,
"setTimeout":true,
"module":true,
"require":true
}
}

gulpfile.js – substituir e por hash nos links da index
var processhtml = require('gulp-processhtml');
var reveasy = require("gulp-rev-easy");
gulp.task('index-replace-links', function () {
return gulp.src('index.html')
.pipe(processhtml())
.pipe(reveasy({ revType: 'date' }))
.pipe(gulp.dest(paths.build + '/'));
});

Index.html
<head>
<meta charset="utf-8">
<title>Automation Build</title>
<link rel="stylesheet" href="lib/mdi/css/materialdesignicons.min.css">

<link rel="stylesheet" href="lib/animate.css/animate.css" />
<link rel="stylesheet" href="lib/angular-material/angular-material.min.css">

</head>

Index.html
<body>
<div id="wrap" ng-view="">

<script src="assets/js/dependences.js"></script>


<script src="assets/js/app.js"></script>


</body>

gulpfile.js – Copiar images, html etc..
gulp.task('copy-prod', function () {
gulp.src(['./images/**/*'])
.pipe(gulp.dest(paths.build + '/images'));
});

gulpfile.js – Servidor de desenvolvimento
var browserSync = require('browser-sync').create();
gulp.task('serve', [
'concat-dep-js-dev',
'concat-app-js-dev',
'compile-less-dev',
], function () {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch(paths.appJs, ['concat-app-js-dev']);
gulp.watch('./assets/js/app.js', ['browser-sync-reload']);
gulp.watch('assets/less/guardian/**/*.less', ['compile-less-dev']);
gulp.watch(paths.appHtml, ['browser-sync-reload']);
});

gulpfile.js – Reload do browser
gulp.task('browser-sync-reload', function (done) {
browserSync.reload();
done();
});

gulpfile.js – Tarefas principais: gulp (default) e gulp build
gulp.task('default', ['serve']);
gulp.task('build', [
'templates-cache',
'compile-style-prod',
'compile-js-prod',
'copy-prod',
'index-replace-links'
]);

Automation build

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Automation build