javascript Gulpfile Compact

Posted 2021-05-03

//========== 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));