javascript Gulpfile 2019

Posted 2021-05-03

//========== Gulp ===============//
var gulp        =require('gulp'), //gulp basico
    concat      =require('gulp-concat'), //concatenar js
    uglify      =require('gulp-uglify'), //minificar js
    browserSync =require('browser-sync'), //browser sync
    reload      =browserSync.reload,//reload
    plumber     =require('gulp-plumber'), //errores
    sass        =require('gulp-sass'),
    postcss     =require('gulp-postcss'),//post CSS
    cssnano     =require('cssnano'),
    csso        =require('gulp-csso'), //minificar CSS
    buffer      =require('vinyl-buffer'),
    sourcemaps  =require('gulp-sourcemaps'),
    autoprefixer=require('autoprefixer'), //autoprefixer
    notify      =require('gulp-notify'), //notificaciones
    browserify  =require("browserify"),
    tsify       =require("tsify"),
    htmlInjector=require("bs-html-injector"),
    source      =require("vinyl-source-stream");


//===== configuraciones ===========//
var config={
  localUrl:'http://127.0.0.1:9898'
};

//Sources
var src={
  sass:  ['./**/*.scss'],
  css:   ['./src/css/**/*.css'],
  js:    ['./src/js/**/*.js'],
  ts:    ['./src/scripts/app.ts'],
  app_js:'./app/scripts/app.js'
};

//Dest
var dest={
  css: './www/css',
  sass:'./www/css',
  js:  './www/js',
  ts:  './www/js',
};

//Errores
var onError=function (err) {
  console.log('--------------> Error --------->'+err);
};

var plugins=[
  autoprefixer({browsers:['last 1 version']}),
  cssnano()
];

//SASS
gulp.task('sass',function () {
  return gulp.src(src.sass)
      .pipe(sourcemaps.init())
      .pipe(sass().on('error',sass.logError))
      .pipe(postcss(plugins))
      .pipe(concat('main.css'))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(dest.sass))
      .pipe(reload({stream:true}));
});

//Concat CSS
gulp.task('cssmin',function () {
  return gulp.src(src.css)
      .pipe(plumber({
        errorHandler:onError
      }))
      .pipe(concat('styles.min.css'))
      //.pipe(autoprefixer(plugins))
      .pipe(csso())
      .pipe(notify('CSS minificado'))
      .pipe(gulp.dest('www/css'))
      .pipe(reload({stream:true}));
});

//Concat js
gulp.task('js',function () {
  gulp.src(src.js)
      .pipe(plumber({
        errorHandler:onError
      }))
      .pipe(concat('scripts.min.js'))
      .pipe(uglify())
      .pipe(notify('scripts.min.js Completo'))
      .pipe(gulp.dest(dest.js))
      .pipe(reload({stream:true}));
});

//Main JS babel
gulp.task('main-js',function () {
  // app.js is your main JS file with all your module inclusions
  return browserify({
    entries:src.app_js,
    debug:  true
  })
      .transform("babelify",{
        presets:   ["es2015"],
        sourceMaps:false
      })
      .bundle()
      .pipe(source('main.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init())
      .pipe(uglify())
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(dest.js))
      .pipe(reload({stream:true}));
});

//Typescript
gulp.task('ts',[],function () {
  return browserify({
    basedir:     '.',
    debug:       true,
    entries:     [src.ts],
    cache:       {},
    packageCache:{},
  })
      .plugin(tsify)
      .bundle()
      .pipe(source('main.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps:true}))
      .pipe(uglify())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest(dest.ts));
  
});

gulp.task('files',function () {
  gulp.src('./**/*.{php,html,py}')
      .pipe(reload({stream:true}))
});


//BrowserSync
gulp.task('browser-sync',function () {
  browserSync.use(htmlInjector,{
    files:["./**/*.html","./**/*.twig"]
  });
  browserSync.init({
    proxy:      config.localUrl,
    port:       8989,
    open:       'external',
    reloadDelay:0,
    minify:     false
  });
});

// Reload all Browsers
gulp.task('reload',function () {
  browserSync.reload();
});

//Watch
gulp.task('watch',function () {
  //files
  gulp.watch('**/*.{php,html,gif,jpg,png,svg,twig,py}',['files']);
  
  //SASS
  gulp.watch(src.sass,['sass']);
  
  //Js main
  //gulp.watch(src.js,['main-js']);
  
  //Typescript
  gulp.watch(src.ts,['ts']);
});

//Default
gulp.task('default',['sass','browser-sync'],function () {
  gulp.start('watch');
});