//========== Gulp ===============//
const {src,dest,parallel,task,watch}=require('gulp');
const concat =require('gulp-concat'), //concatenar js
uglify =require('gulp-uglify'), //minificar js
browserSync =require('browser-sync').create(), //browser sync
reload =browserSync.reload,//reload
plumber =require('gulp-plumber'), //errores
sass =require('gulp-sass'),
postcss =require('gulp-postcss'),//post CSS
cssnano =require('cssnano'),
buffer =require('vinyl-buffer'),
sourcemaps =require('gulp-sourcemaps'),
autoprefixer=require('autoprefixer'), //autoprefixer
csso =require('gulp-csso'), //minificar CSS
notify =require('gulp-notify'), //notificaciones
htmlInjector=require("bs-html-injector"),
tsify =require("tsify"),
browserify =require("browserify"),
source =require("vinyl-source-stream");
//===== configuraciones ===========//
//================================//
const localUrl='http://127.0.0.1:5000';
//sources
const sources={
php: 'www/**/*.php',
sass:'./app/sass/**/*.scss',
css: ['www/css/lib/**/*.css','www/css/lib/**/*.min.css'],
js: ['app/scripts/libs/**/*.js'],
};
//destinos
var destination={
php: 'www/',
css: 'www/css/',
sass: 'www/css',
js: 'www/js/',
js_admin:'www/js/',
};
//errores
var onError=function (err) {
console.log('--------------> Error --------->');
console.log(err);
console.log('--------------> Error --------->');
};
function task_sass() {
return src(sources.sass)
.pipe(sourcemaps.init())
.pipe(sass().on('error',sass.logError))
.pipe(postcss(plugins))
.pipe(csso())
.pipe(sourcemaps.write())
.pipe(dest(destination.sass))
.pipe(notify('SASS complete'))
.pipe(reload({stream:true}));
}
var plugins=[
autoprefixer(),
cssnano({zindex:false})
];
//acciones css
function task_cssmin() {
return src(sources.css)
.pipe(plumber())
.pipe(concat('styles.min.css'))
.pipe(postcss(plugins))
.pipe(notify('CSS minificado'))
.pipe(dest('www/css'))
.pipe(reload({stream:true}));
}
const config={
ts:{
appTs: './app/scripts/app.ts',
appTsName:'main.js',
destTs: './www/js'
}
};
function task_ts() {
return browserify({
basedir: '.',
debug: true,
entries: [config.ts.appTs],
cache: {},
packageCache:{}
})
.plugin(tsify)
.bundle()
.on('error', function (error) { console.error(error.toString()); })
//.pipe(plumber())
.pipe(source(config.ts.appTsName))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(notify('Typescript Complete'))
.pipe(dest(config.ts.destTs))
.pipe(reload({stream:true}));
}
//Main js del sitio
function task_main_js() {
return browserify({
entries:'./app/scripts/app_panel.js',
debug: true
}).transform("babelify",{
presets: ["es2015"],
sourceMaps:false
}).bundle()
.pipe(plumber())
.pipe(source('main.min.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(dest(destination.js))
.pipe(reload({stream:true}));
}
function task_files() {
return src('./**/*.{php,html,py}')
.pipe(reload({stream:true}))
}
//browser sync
function task_browsersync() {
browserSync.use(htmlInjector,{
files:["./views/**/*.html","./views/**/*.twig"]
});
browserSync.init({
proxy:localUrl,
open: 'external',
});
}
//mirar la carpetas
function task_watch() {
//files
watch('./**/*.{gif,jpg,png,svg,twig,py}',parallel(task_files));
//Sass
watch(sources.sass,parallel(task_sass));
//CSS
watch(sources.css,parallel(task_cssmin));
//js main front-page
watch('app/scripts/**/*.ts',parallel(task_ts));
}
task('default',parallel(task_watch,task_browsersync));