Skip to content

Instantly share code, notes, and snippets.

@thom4parisot
Last active September 22, 2020 11:43
Show Gist options
  • Save thom4parisot/1e233f2100c4e0877922 to your computer and use it in GitHub Desktop.
Save thom4parisot/1e233f2100c4e0877922 to your computer and use it in GitHub Desktop.
gulp -> npm scripts only
import App from './app.js';
import * as stylesheet from './stylesheets/enhanced.scss';
(new App()).init();
import window from 'global';
import React from 'react';
import ReactDOM from 'react-dom';
import request from 'superagent'
import Recipe from './recipe';
import RecipeList from './components/RecipeList.jsx';
import CreativeWorksStream from './components/CreativeWorksStream.jsx';
const REFRESH_INTERVAL = process.env.REFRESH_INTERVAL || 3600 * 5 * 1000;
class CreativeWorksStreamApp {
// ...
static init (options) {
// ...
}
}
export default CreativeWorksStreamApp;
'use strict';
var pkg = require('./package.json');
var gulp = require('gulp');
var utils = require('gulp-util');
var source = require('vinyl-source-stream');
var isWatching = false;
var isProduction = process.env.NODE_ENV === 'production';
var browserify = require('browserify');
var watchify = require('watchify');
var sass = require('gulp-sass');
var flatten = require('./src/gulp/flatten-dir');
var manifest = require('gulp-manifest');
var webserver = require('gulp-webserver');
var runSequence = require('run-sequence');
var del = require('del');
var logMessage = function(template){
var message = utils.template.bind(null, template);
return function(){
return utils.log(message({ args: arguments, file: '' }));
};
};
var minifyConfig = {
output: !isProduction ? './dist/assets' : null,
minify: isProduction
};
if (isProduction) {
minifyConfig.map = false;
}
var bundles = {
'app-bundle.js': null
};
var paths = {
css: './assets/stylesheets/**/*.scss',
assets: './public/**/*',
jsx: 'src/**/*',
npmAssets: [
'./node_modules/@freebird/*/images/**',
'./node_modules/@freebird/*/node_modules/@freebird/*/images/**'
]
};
gulp.task('appcache', function(){
var stream = gulp.src(['./dist/**/*'])
.pipe(manifest({
hash: true,
preferOnline: false,
network: ['http://*', 'https://*', '*'],
filename: 'cache.appcache',
exclude: 'cache.appcache'
}))
.pipe(gulp.dest('./dist'));
return stream;
});
function bundleExec(bundleId){
return bundles[bundleId].bundle()
.pipe(source(bundleId))
.pipe(gulp.dest('./dist/assets'));
}
gulp.task('build-bundle', function(){
return browserify({ standalone: pkg.name })
.add('./index.js')
.external('./assets/vendor-bundle')
.bundle()
.pipe(source('component-bundle.js'))
.pipe(gulp.dest('./dist/assets'));
});
gulp.task('prepare-bundles', function(){
var wrap = isWatching ? watchify : function(b){ return b; };
var bConfig = isWatching
? { debug: true, cache: {}, packageCache: {}, fullPaths: true, standalone: pkg.name }
: { debug: !isProduction, standalone: pkg.name };
Object.keys(bundles).forEach(function(bundleId){
bundles[bundleId] = wrap(browserify(bConfig)
.add('./assets/javascript/' + bundleId))
.external('react')
.external('react-dom')
.external('react-select')
.plugin('minifyify', minifyConfig);
bundles[bundleId].on('update', bundleExec.bind(null, bundleId));
bundles[bundleId].on('update', logMessage('Bundling ' + bundleId));
bundles[bundleId].on('time', logMessage('Finished ' + bundleId + ' after <%= args[0] %> ms'));
bundles[bundleId].on('error', logMessage('<%= args[0] %>'));
});
});
gulp.task('app-bundle', bundleExec.bind(null, 'app-bundle.js'));
gulp.task('vendor-bundle', function(){
return browserify()
.require('react')
.require('react-dom')
.require('react-select')
.plugin('minifyify', minifyConfig)
.bundle()
.pipe(source('vendor-bundle.js'))
.pipe(gulp.dest('./dist/assets'));
});
gulp.task('css', function(){
return gulp.src(paths.css)
.pipe(sass({ errLogToConsole: !isProduction }))
.pipe(gulp.dest('./dist/assets'));
});
gulp.task('clean', function(){
return del(['dist/**/*', '!dist/.gitignore']);
});
gulp.task('copy-assets', function(){
return gulp.src(paths.assets)
.pipe(gulp.dest('./dist'));
});
gulp.task('copy-dependencies-assets', function(){
return gulp.src(paths.npmAssets)
.pipe(flatten('images'))
.pipe(gulp.dest('./dist/images'));
});
gulp.task('set-watch-flag', function(done){
isWatching = true;
done();
});
gulp.task('watch', function() {
gulp.watch(paths.assets, ['copy-assets']);
gulp.watch(paths.css, ['css']);
gulp.watch(paths.jsx, ['build-bundle']);
});
gulp.task('serve', function(){
return gulp.src('./dist').pipe(webserver({
livereload: true,
directoryListing: false,
open: false,
port: process.env.PORT || 8000
}));
});
gulp.task('default', ['build']);
gulp.task('build', function(done){
runSequence('clean',
['css', 'prepare-bundles'],
'vendor-bundle',
'build-bundle',
'app-bundle',
['copy-assets', 'copy-dependencies-assets'], done);
});
gulp.task('build-production', function(done){
runSequence('build', 'appcache', done);
});
gulp.task('dev', function(done){
runSequence('set-watch-flag', 'build', ['serve', 'watch'], done);
});
{
"scripts": {
"test": "mocha --compilers js:babel-core/register test/unit",
"posttest": "eslint --ext .js,.jsx ./assets ./src index.js",
"build": "npm-run-all clean copy 'build:*'",
"build:vendor": "browserify -r react -r react-dom -r react-select -d -p [ minifyify --map vendor-bundle.map.json --output ./dist/vendor-bundle.map.json ] -o ./dist/vendor-bundle.js",
"build:app": "browserify -e ./src/app-bundle.js -x react -x react-dom -x react-select -o ./dist/app-bundle.js",
"clean": "rimraf ./dist/**/*",
"copy": "mkdir -p ./dist && cp ./public/* ./dist",
"serve": "static -p ${PORT:-5000} --gzip --host-address 0.0.0.0 dist/",
"start": "npm run serve",
"prestart": "npm run build",
"watch": "PORT=${PORT:-$(get-port)} npm-run-all --parallel serve build:vendor build:css 'watch:*'",
"watch:app": "watchify -dv -e ./src/app-bundle.js -x react -x react-dom -x react-select -p livereactload -o ./dist/app-bundle.js"
},
"browserify": {
"transform": [
"babelify",
[
"sassify",
{
"auto-inject": true
}
],
"envify"
]
},
"dependencies": {
"babelify": "^7.2.0",
"classnames": "^2.0.0",
"envify": "^3.3.0",
"fastclick": "^1.0.6",
"gel-grid": "^1.0.0",
"gel-iconography-assets-assets": "^1.1.0",
"gel-settings": "^0.4.1",
"gel-tools": "^0.4.2",
"gel-typography": "^1.0.0-beta.2",
"global": "^4.3.0",
"lodash": "^3.10.1",
"minifyify": "^7.0.0",
"moment": "^2.10.6",
"node-static": "^0.7.6",
"react": "^0.14.3",
"react-autoupdate-time": "^1.0.5",
"react-dom": "^0.14.3",
"react-select": "^0.9.1",
"sassify": "^0.9.0",
"superagent": "^1.4.0",
"tinycolor2": "^1.0.0",
"tinygradient": "^0.3.0"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^4.1.6",
"babel-plugin-syntax-object-rest-spread": "^6.1.18",
"babel-plugin-transform-object-rest-spread": "^6.1.18",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"browserify": "^12.0.0",
"chai": "^3.4.1",
"eslint": "^1.10.1",
"eslint-plugin-react": "^3.10.0",
"get-port": "^1.0.0",
"livereactload": "^2.1.0",
"mocha": "^2.3.4",
"npm-run-all": "^1.3.2",
"rimraf": "^2.4.4",
"watchify": "^3.0.0"
}
}
{
"scripts": {
"test": "eslint --ext .js,.jsx ./assets ./src index.js",
"build": "gulp build",
"build-production": "gulp build-production",
"start": "static -p ${PORT:-5000} --gzip --host-address 0.0.0.0 dist/",
"watch": "PORT=${PORT:-$(get-port)} gulp dev"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react"
]
}
],
"envify"
]
},
"dependencies": {
"babelify": "^7.2.0",
"classnames": "^2.0.0",
"envify": "^3.3.0",
"fastclick": "^1.0.6",
"gel-grid": "^1.0.0",
"gel-iconography-assets-assets": "^1.1.0",
"gel-settings": "^0.4.1",
"gel-tools": "^0.4.2",
"gel-typography": "^1.0.0-beta.2",
"global": "^4.3.0",
"lodash": "^3.10.1",
"minifyify": "^7.0.0",
"moment": "^2.10.6",
"node-static": "^0.7.6",
"react": "^0.14.3",
"react-autoupdate-time": "^1.0.5",
"react-dom": "^0.14.3",
"react-select": "^0.9.1",
"sassify": "^0.9.0",
"superagent": "^1.4.0",
"tinycolor2": "^1.0.0",
"tinygradient": "^0.3.0"
},
"devDependencies": {
"babel-eslint": "^4.1.6",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"browserify": "^11.0.0",
"del": "^2.0.0",
"eslint": "^1.10.1",
"eslint-plugin-react": "^3.10.0",
"get-port": "^1.0.0",
"gulp": "^3.8.10",
"gulp-manifest": "0.0.6",
"gulp-sass": "^2.0.0",
"gulp-util": "^3.0.3",
"gulp-webserver": "^0.9.0",
"run-sequence": "^1.0.0",
"through2": "^2.0.0",
"vinyl-source-stream": "^1.0.0",
"watchify": "^3.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment