Snippets Collections
function js(done) {
	jsFiles.map( function( entry ) {
		return browserify({
			entries: [jsSRC + entry]
		})
		.transform( babelify, { presets: [ '@babel/preset-env' ] } )
		.bundle()
		.pipe( source( entry ) )
		.pipe( rename( {
			extname: '.min.js'
        } ) )
		.pipe( buffer() )
		.pipe( gulpif( options.has( 'production' ), stripDebug() ) )
		.pipe( sourcemaps.init({ loadMaps: true }) )
		.pipe( uglify() )
		.pipe( sourcemaps.write( '.' ) )
		.pipe( dest( jsURL ) )
		.pipe( browserSync.stream() );
	});
	done();
};
const reduceData = (data: any[], property: string) => {
  const result = data.reduce((acc, amount) => {
    return acc + Number(amount[property]);
  }, 0);
  return result;
};
/* 
	https://www.youtube.com/watch?v=q0E1hbcj-NI
    Browsersync + Sass + Gulp in 15 minutes
    
	install as devDependencies:
	npm install browser-sync cssnano gulp gulp-cli gulp-postcss gulp-sass gulp-terser sass -D    
*/

// run gulp by typing on terminal : gulp
// error: gulp-sass no longer has a default Sass compiler; please set one yourself.

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");
const terser = require("gulp-terser");
const browsersync = require("browser-sync").create();

// sass task
function sassTask() {
  return src("./sass/style.scss", { sourcemaps: true })
    .pipe(sass())
    .pipe(postcss([cssnano()]))
    .pipe(dest("dist/css", { sourcemaps: "." }));
}

// javascript task
function jsTask() {
  return src("./js/index.js", { sourcemaps: true })
    .pipe(terser())
    .pipe(dest("dist/js", { sourcemaps: "." }));
}

// browsersync
function browserSyncServer(callback) {
  browsersync.init({
    server: {
      baseDir: ".",
    },
  });
  callback();
}

function browserSyncReload(callback) {
  browsersync.reload();
  callback();
}

// watch task
function watchTask() {
  watch("*.html", browserSyncReload);
  watch(
    ["./sass/**/*.scss", ".js/**/*.js"],
    series(sassTask, jsTask, browserSyncReload)
  );
}

// gulp workflow
exports.default = series(sassTask, jsTask, browserSyncServer, watchTask);
var {src, dest, watch}        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static server
  function bs() {
    serveSass();
  browserSync.init({
      server: {
          baseDir: "./"
      }
  });
  watch("./*.html").on('change', browserSync.reload);
  watch("./scss/**/*.scss", serveSass);
  watch("./js/*.js").on('change', browserSync.reload);
};

// Compile sass into CSS & auto-inject into browsers
 function serveSass() {
  return src("./scss/*.scss")
      .pipe(sass())
      .pipe(dest("./css"))
      .pipe(browserSync.stream());
};

exports.serve = bs;
star

Sun Oct 02 2022 01:08:27 GMT+0000 (Coordinated Universal Time)

#gulp #browserify
star

Wed Jun 01 2022 14:11:06 GMT+0000 (Coordinated Universal Time)

#javascript #sass #gulp #css
star

Fri May 13 2022 09:03:15 GMT+0000 (Coordinated Universal Time)

#javascript #sass #gulp #css
star

Mon Jun 29 2020 22:48:29 GMT+0000 (Coordinated Universal Time)

#gulp #nodejs

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension