Skip to content

Instantly share code, notes, and snippets.

@mklickman
Last active July 12, 2016 20:03
Show Gist options
  • Save mklickman/9218136d3876e9033bcd3861edd430e0 to your computer and use it in GitHub Desktop.
Save mklickman/9218136d3876e9033bcd3861edd430e0 to your computer and use it in GitHub Desktop.
browserify ES2015 woes
const AppComponent = {
template: `
<div class="app-component-root">
<div ui-view></div>
</div>
`,
};
export default AppComponent;
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import AppComponent from './app.component';
const root = angular
.module('gravityGun', [
uiRouter
])
.component('app', AppComponent)
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('dashboard', {
url: '/',
component: 'app'
});
});
export default root;
$: browserify app/js/app.js -o app/js/main.js
~/myproject/app/js/app.js:1
import angular from 'angular';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
// Gulp core
var gulp = require('gulp');
// Gulp plugins
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var del = require('del');
var webserver = require('gulp-webserver');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
// Gulp Tasks //
//--------------------------------------------//
// Copy HTML templates to dist
gulp.task('html', function() {
return gulp.src('app/index.html')
.pipe(gulp.dest('dist/'));
});
gulp.task('templates', function() {
return gulp.src('app/templates/**/*.html')
.pipe(gulp.dest('dist/templates'));
});
// Process & minify styles
gulp.task('styles', function() {
var sources = [
'app/scss/*.scss'
];
return gulp.src(sources)
.pipe(
sass({
outputStyle: 'expanded',
sourceComments: true,
includePaths: [
'./node_modules/compass-mixins/lib'
]
})
.on('error', sass.logError))
.pipe(gulp.dest('app/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(gulp.dest('dist/css/'));
});
// Concatenate & minify scripts
gulp.task('browserify', function() {
return browserify('app/js/app.js')
// transform ES2015 -> ES5
.transform('babelify', {
presets: ['es2015']
})
// bundles app.js and creates a file called main.js
.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest('app/js/'))
.pipe(gulp.dest('dist/js/'));
});
// Make a clean build
gulp.task('clean', function() {
return del(['dist/css', 'dist/js']);
});
// Run test suite
gulp.task('test', function() {
});
// Start local server
gulp.task('serve', ['html', 'templates', 'styles', 'browserify', 'watch'], function() {
gulp.src('app')
.pipe(webserver({
open: true
}));
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('serve');
});
// Watch files for changes, trigger LiveReaload
gulp.task('watch', function() {
// Watch .html files
gulp.watch('app/**/*.html', ['html', 'templates']);
// Watch .scss files
gulp.watch(['app/scss/*.scss', 'node_modules/credda_shared_assets/scss/*.scss'], ['styles']);
// Watch .js files
gulp.watch('app/js/**/*.js', ['browserify']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['app/**']).on('change', livereload.changed);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment