Skip to content

Instantly share code, notes, and snippets.

@donhenton
Created January 17, 2019 15:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donhenton/b828d40679c8fdd7dc21238baf75b93c to your computer and use it in GitHub Desktop.
Save donhenton/b828d40679c8fdd7dc21238baf75b93c to your computer and use it in GitHub Desktop.
Updated Browserify/Babel for Babel7
var gulp = require('gulp');
var targetLocation = './public_html/'
var appDependencies = require('./package.json').dependencies;
var SASS_FILES = ['./src/sass/*.scss', './src/sass/components/*.scss'];
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var fs = require('fs');
var del = require('del');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('babelify');
var notifier = require('node-notifier');
var notify = function(error) {
var message = 'In: ';
var title = 'Error: ';
if(error.description) {
title += error.description;
} else if (error.message) {
title += error.message;
}
if(error.filename) {
var file = error.filename.split('/');
message += file[file.length-1];
}
if(error.lineNumber) {
message += '\nOn Line: ' + error.lineNumber;
}
console.log({title: title, message: message});
};
var bundler = browserify({
entries: ['./src/js/index.js'],
transform: [["babelify", {"presets": ["@babel/preset-env"]}]],
extensions: ['.js'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
function Bundle() {
return bundler
.bundle()
.on('error', notify)
}
gulp.task('build', function () {
Bundle()
.pipe(source('build.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public_html/js/build'))
// .on('finish', function ( ) {
//
// //livereload.reload(pageURL); browsersync.reload ??????
// });
;
//.pipe(gulp.dest('./resources'));
});
//https://browsersync.io/docs/gulp
gulp.task('clean', function ( ) {
del(['public_html/css/main.css', 'public_html/js/build']);
});
gulp.task('compile-sass', function () {
return gulp.src('./src/sass/main.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(sass())
.pipe(concat('main.css'))
// .pipe(uglifycss())
.pipe(gulp.dest('./public_html/css/'))
});
gulp.task('serve', ['compile-sass'], function () {
browserSync.init({
server: "./public_html",
port: 5600,
ui: {port: 5601}
});
gulp.watch(SASS_FILES, ['compile-sass']);
gulp.watch("public_html/css/main.css").on('change', browserSync.reload);
gulp.watch("public_html/**/*.html").on('change', browserSync.reload);
gulp.watch("src/js/**/*.js").on('change', function(events, done) {
gulp.start('build');
});
gulp.watch("public_html/js/**/*.js").on('change', browserSync.reload);
});
gulp.task('default', ['serve']);
/* end frontend task ---------------------------------------- */
@donhenton
Copy link
Author

Uses browser sync

@donhenton
Copy link
Author

donhenton commented Jan 17, 2019

package.json
{
"name": "greensock-sandbox",
"version": "1.0.0",
"keywords": [
"util",
"functional",
"server",
"client",
"browser"
],
"contributors": [],
"devDependencies": {
"@babel/core": "7.2.2",
"@babel/preset-env": "7.2.3",
"babel": "6.23.0",
"babel-preset-env": "1.7.0",
"babelify": "10.0.0",
"browser-sync": "2.26.3",
"browserify": "16.2.3",
"del": "^2.2.0",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "2.6.4",
"node-notifier": "5.3.0",
"vinyl-buffer": "1.0.1",
"vinyl-source-stream": "2.0.0",
"watchify": "3.11.0"
},
"dependencies": {
"gsap": "2.0.2"
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment