Skip to content

Instantly share code, notes, and snippets.

@sidneydemoraes
Last active February 9, 2018 16:57
Show Gist options
  • Save sidneydemoraes/a7a8b426f9960688773aa2a5b11833f1 to your computer and use it in GitHub Desktop.
Save sidneydemoraes/a7a8b426f9960688773aa2a5b11833f1 to your computer and use it in GitHub Desktop.
Exemplo de config para Gulp
var autoPrefixBrowserList = ['last 2 ff versions', 'last 2 chrome versions', 'last 2 Edge versions',
'last 2 safari versions', 'android >= 5', 'ie >= 10', 'safari >=8', 'ios >= 10'],
gulp = require('gulp'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
del = require('del'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
rjs = require('gulp-requirejs-optimize'),
gulpSequence = require('gulp-sequence').use(gulp),
shell = require('gulp-shell'),
print = require('gulp-print');
/** O motivo de usar 'new function(){}' é que javascript não permite self-reference em objetos literais */
var paths = new function () {
this.workingDir = 'globomais-web/src/main/webapp/WEB-INF',
this.assetsDir = this.workingDir + '/assets',
this.baseDir = {
css: this.assetsDir + '/style/v2',
sass: this.assetsDir + '/style/v2/scss',
js: this.assetsDir + '/script/v2',
media: this.assetsDir + '/media',
mock: this.workingDir,
dist: 'dist'
},
this.src = {
images: [this.baseDir.media + '/*.jpg', this.baseDir.media + '/*.png'],
sass: [
this.baseDir.sass + '/home/home.scss',
this.baseDir.sass + '/conta/conta.scss'
],
js: this.baseDir.js + '/*.js',
configFile: this.baseDir.js + '/config/require.cfg.js',
war: 'globomais-web/target/*.war'
},
this.dest = {
images: this.baseDir.dist + '/media',
css: this.baseDir.dist + '/css',
js: this.baseDir.dist + '/js',
jsConfig: this.baseDir.dist + '/js/config'
},
this.watch = {
js: this.baseDir.js + '/**',
css: this.baseDir.css + '/**',
sass: this.baseDir.sass + '/**',
media: this.baseDir.media + '/**',
html: this.baseDir.mock + '/**'
}
};
gulp.task('browserSync', ['compile-dev-css'], function () {
browserSync({
server: {
baseDir: paths.baseDir.mock,
index: 'mockup.html'
},
options: {
reloadDelay: 250
},
files: [
paths.watch.js,
paths.watch.css,
paths.watch.html
],
notify: false
});
gulp.watch(paths.watch.sass, ['compile-dev-css']);
});
gulp.task('delete-css', function () {
return del([paths.dest.css + '/**', paths.baseDir.css + '/*.css']);
});
gulp.task('compile-dev-css', function () {
console.log(paths.src.sass);
return gulp
.src(paths.src.sass)
.pipe(plumber())
.pipe(sass({
errLogToConsole: true,
includePaths: paths.baseDir.sass
}))
.pipe(autoprefixer({
browsers: autoPrefixBrowserList
}))
.pipe(gulp.dest(paths.baseDir.css))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('compile-css', function () {
return gulp
.src(paths.src.sass)
.pipe(plumber())
.pipe(sass({
errLogToConsole: true,
includePaths: paths.baseDir.sass,
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: autoPrefixBrowserList
}))
.pipe(gulp.dest(paths.dest.css));
});
gulp.task('compile-dev-css', function () {
return gulp
.src(paths.src.sass)
.pipe(plumber())
.pipe(sass({
errLogToConsole: true,
includePaths: paths.baseDir.sass
}))
.pipe(autoprefixer({
browsers: autoPrefixBrowserList
}))
.pipe(gulp.dest(paths.baseDir.css));
});
gulp.task('delete-js', function () {
return del(paths.dest.js);
});
gulp.task('compile-js', function () {
console.log(paths.src.js);
return gulp
.src(paths.src.js)
.pipe(plumber())
.pipe(print())
.pipe(rjs({
baseUrl: paths.baseDir.js,
optimize: 'uglify2',
mainConfigFile: paths.src.configFile
}))
.pipe(gulp.dest(paths.dest.js));
});
gulp.task('copy-js-config', function () {
return gulp
.src(paths.src.configFile)
.pipe(plumber())
.pipe(gulp.dest(paths.dest.jsConfig));
});
gulp.task('clean-dist', function () {
return del([paths.baseDir.dist + '/**', '!' + paths.baseDir.dist]);
});
gulp.task('compile-static-files', ['clean-dist'], gulpSequence('compile-css', 'compile-dev-css', 'compile-js', 'copy-js-config'));
gulp.task('compile-static-dev-files', ['clean-dist', 'compile-dev-css']);
gulp.task('maven-hom', shell.task('mvn clean package -Phom,integration'));
gulp.task('maven-prd', shell.task('mvn clean package -Pprod,integration'));
gulp.task('package-hom', ['compile-static-dev-files', 'maven-hom'], function () {
return gulp
.src(paths.src.war)
.pipe(gulp.dest(paths.baseDir.dist));
});
gulp.task('package-prd', ['compile-static-files', 'maven-prd'], function () {
return gulp
.src(paths.src.war)
.pipe(gulp.dest(paths.baseDir.dist));
});
gulp.task('default', ['browserSync']);
======================================================================================================================
Exemplo do package.json
{
"name": "Produto",
"version": "1.1.0",
"description": "Descrição",
"author": "Autor",
"scripts": {
"start": "gulp",
"deploy": "gulp deploy"
},
"devDependencies": {
"browser-sync": "^2.18.13",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-print": "^2.0.1",
"gulp-requirejs-optimize": "^1.2.0",
"gulp-sass": "^2.0.4",
"gulp-sequence": "^0.4.1",
"gulp-shell": "^0.6.3"
},
"dependencies": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment