Last active
February 9, 2018 16:57
-
-
Save sidneydemoraes/a7a8b426f9960688773aa2a5b11833f1 to your computer and use it in GitHub Desktop.
Exemplo de config para Gulp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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