27
Automation build

Automation build

Embed Size (px)

Citation preview

Page 1: Automation build

Automation build

Page 2: Automation build

Desenvolvedor Front-End

Autor: Ivanildo Silva

Page 3: Automation build

Automation build

Page 4: Automation build
Page 5: Automation build

É o processo de criar

tarefas automatizadas para

criação de uma compilação

de software e os processos

associados.

Page 6: Automation build

Build Manual

Page 7: Automation build

Serviços repetitivos

Page 8: Automation build
Page 9: Automation build
Page 10: Automation build

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

Page 11: Automation build

As dependências nunca sobem para produção

Page 12: Automation build
Page 13: Automation build

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.

Page 14: Automation build

gulpfile.js – istanciando pluginsvar 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();

Page 15: Automation build

gulpfile.js – Mapeando diretóriosvar 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'};

Page 16: Automation build

gulpfile.js – Compilando CSSvar gulp = require('gulp');var concatCss = require('gulp-concat-css');var cleanCSS = require('gulp-clean-css');var merge = require('merge-stream');var less = require('gulp-less');var rename = require('gulp-rename');

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/'));});

Page 17: Automation build

gulpfile.js – Compilando JSvar gulp = require('gulp');var concat = require('gulp-concat');var uglify = require('gulp-uglify');var rename = require('gulp-rename');

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'));

});

Page 18: Automation build

gulpfile.js – jshint: verificando possíveis erros no jsvar gulp = require('gulp');var jshint = require('gulp-jshint');

gulp.task('jshint', function () { return gulp.src(paths.appJs) .pipe(jshint()) .pipe(jshint.reporter('default', { verbose: true }));});

Page 19: Automation build

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

Page 20: Automation build

gulpfile.js – substituir e por hash nos links da indexvar 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 + '/'));});

Page 21: Automation build

Index.html

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

<!-- build:css css/app.min.css--> <link rel="stylesheet" href="lib/animate.css/animate.css" /> <link rel="stylesheet" href="lib/angular-material/angular-material.min.css"> <!-- /build --></head>

Page 22: Automation build

Index.html

<body>

<div id="wrap" ng-view="">

<!-- build:js js/dependences.min.js --> <script src="assets/js/dependences.js"></script> <!-- /build -->

<!-- build:js js/app.min.js --> <script src="assets/js/app.js"></script> <!-- /build -->

<!-- build:js js/templatesCache.min.js --><!-- /build --></body>

Page 23: Automation build

gulpfile.js – Copiar images, html etc..

var gulp = require('gulp');

gulp.task('copy-prod', function () {

gulp.src(['./images/**/*']) .pipe(gulp.dest(paths.build + '/images')); });

Page 24: Automation build

gulpfile.js – Servidor de desenvolvimentovar gulp = require('gulp');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']);});

Page 25: Automation build

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

Page 26: Automation build

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'

]);

Page 27: Automation build