Automation build
-
Upload
ivanildo-silva-de-lima -
Category
Software
-
view
54 -
download
1
Transcript of Automation build
Automation build
Desenvolvedor Front-End
Autor: Ivanildo Silva
Automation build
É o processo de criar
tarefas automatizadas para
criação de uma compilação
de software e os processos
associados.
Build Manual
Serviços repetitivos
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 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();
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'};
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/'));});
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'));
});
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 }));});
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 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 + '/'));});
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>
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>
gulpfile.js – Copiar images, html etc..
var gulp = require('gulp');
gulp.task('copy-prod', function () {
gulp.src(['./images/**/*']) .pipe(gulp.dest(paths.build + '/images')); });
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']);});
gulpfile.js – Reload do browsergulp.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'
]);