Skip to content

Instantly share code, notes, and snippets.

@dts dts/develop.js
Created Feb 20, 2015

Embed
What would you like to do?
Develop.js is a development mode script that allows gulp-angular projects to report errors in JS and SASS to the user via the web browser, instead of the terminal. I have used colons to delimit folders - there are two, /develop and /develop/templates.
var LR_PORT= 35730;
var express = require('express');
var gulp = require('gulp');
var app = express();
var livereload = require('livereload');
var proxy = require('http-proxy').createProxyServer({ target : 'http://localhost:3000/api' , toProxy : true , prependPath : true });
// needs:
// we need to recompile HTML file every time the JS file list changes
// we need to recompile SASS every time a scss file changes, and update the css file.
// we need to reload every time JS file changes (without recompiling HTML)
// HTML injection
var index_html = require('./develop/html');
app.set('view engine', 'ejs');
app.set('views',__dirname+'/develop/templates')
app.get('/',index_html);
app.use(require('./develop/styles'));
app.use(express.static('src'));
app.use('/bower_components/',express.static('bower_components'));
app.use('/app/fonts',express.static('bower_components/foundation-icon-fonts'));
app.use('/videogular',express.static('bower_components/videogular-themes-default/fonts'));
app.use('/api',function(req,res) {
return proxy.web(req,res); } );
app.listen(8101);
livereload = livereload.createServer( { port: LR_PORT } );
var watch = require('node-watch');
watch(
['src','bower_components'],
function(filename) {
console.log("Changed: ",filename);
if(filename.match(/\.html$/) || filename.match(/\.js$/)) {
console.log("Refershing everyging");
livereload.refresh('/');
}
if(filename.match(/\.scss$/)) {
console.log("refreshing only index.css");
livereload.refresh('app/index.css');
}
}
);
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var wiredep = require('wiredep').stream;
var src = 'src/'
var sendTo = require('./sendTo');
var paths = { src : "src" };
var File = require('vinyl');
var plumber = require('gulp-plumber');
module.exports = function index_html(req,res) {
var injectStyles = gulp.src([
'src/app/app.css',
'src/app/vendor.css'
]);
var injectScripts = gulp.src([
'http://core.yogitunes.com:35730/livereload.js?snipver=1',
src + '/{app,components}/**/*.js',
'!' + src + '/{app,components}/**/*.spec.js',
'!' + src + '/{app,components}/**/*.mock.js'
]).pipe($.angularFilesort()).
on('error',function(err) {
console.log("Error happened, that's OK.");
var err_msg = err.message.match(/^\s*(.*?)\s*$/)[1];
res.render('js_error.html.ejs',{ err_msg : err_msg });
this.emit('end');
});
var injectOptions = {
ignorePath: [src],
addRootSlash: false
};
var wiredepOptions = {
directory: 'bower_components',
ignorePath: '../',
exclude: [/foundation\.js/, /foundation\.css/, /bootstrap\.css/, /foundation\.css/,/ionicons\.css/,/videogular\.css/,/intro\.js/]
};
return gulp.src(src + '/index.html')
.pipe(plumber({
errorHandler : function(err) {
console.log("OMg dudes.");
var err_msg = err.message;
res.write(err_msg);
res.end();
}
}
))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(wiredepOptions))
// .pipe(gulp.dest(tmp + '/serve'))
.on('error',function(err) {
console.log("OMgwtf : ",err);
this.emit('end');
})
.pipe(sendTo(res));
}
var through = require('through');
// create a stream that reads gulp File objects and outputs their contents
module.exports = function sendTo(res) {
return through(
function write(data) { // this will be called once for each file
res.write(data.contents);
},
function end() { // this will be called when there are no more files
res.end()
}
);
}
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sendTo = require('./sendTo');
var fs = require('vinyl-fs');
var paths = { src : "src" };
var File = require('vinyl');
var plumber = require('gulp-plumber');
var sassOptions = {
style: 'expanded',
};
var injectFiles = gulp.src([
paths.src + '/{app,components}/**/*.scss',
'!' + paths.src + '/app/index.scss',
'!' + paths.src + '/app/vendor.scss'
], { read: false });
var injectOptions = {
transform: function(filePath) {
filePath = filePath.replace(paths.src + '/app/', '');
filePath = filePath.replace(paths.src + '/components/', '../components/');
return '@import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector',
addRootSlash: false
};
var indexFilter = $.filter('index.scss');
var express = require('express')
var styles = express();
styles.set('view engine', 'ejs');
styles.set('views',__dirname+'/templates')
function doit(path,source) {
styles.get(path,function(req,res) {
var error = false;
console.log("GEtting req",req.path);
fs.src([ source ])
.pipe(plumber({
errorHandler : function(err) {
var match = err.message.match(/^\s*(.*?)\s*$/);
var err_msg = err.message.replace(/(\n|\r)/gim,"\A");
styles.render('css_error.css.ejs',{ err_msg : err_msg },function(err,str) {
res.write(str);
res.end();
});
}
})
)
// .pipe(indexFilter)
// .pipe($.inject(injectFiles,injectOptions))
// .pipe(indexFilter.restore())
.pipe($.sass(sassOptions))
.pipe($.autoprefixer())
.pipe(sendTo(res));
});
}
doit('/app/vendor.css',paths.src+'/app/vendor.scss');
doit('/app/index.css',paths.src+'/app/index.scss');
module.exports = styles;
body {
background-color: #efa;
}
body:before {
content: "<%= err_msg %>'";
color: black;
background-color: #EEE;
padding: 2em;
border: 1px thin black;
z-index: 100000;
position: fixed;
top: 10px;
left: 10px;
display: block;
}
<script src="http://localhost:35730/livereload.js?snipver=1"></script>
A javascript error occurred:
<%= err_msg %>
{
"name": "admin",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"browser-sync": "~1.7.1",
"chalk": "~0.5.1",
"connect-livereload": "^0.5.2",
"del": "~0.1.3",
"ejs": "^2.2.4",
"express": "^4.11.2",
"gulp": "~3.8.10",
"gulp-angular-filesort": "~1.0.4",
"gulp-angular-templatecache": "~1.4.2",
"gulp-autoprefixer": "~2.0.0",
"gulp-consolidate": "~0.1.2",
"gulp-csso": "~0.2.9",
"gulp-filter": "~1.0.2",
"gulp-flatten": "~0.0.4",
"gulp-inject": "~1.0.2",
"gulp-jshint": "~1.9.0",
"gulp-karma": "~0.0.4",
"gulp-load-plugins": "~0.7.1",
"gulp-minify-html": "~0.1.7",
"gulp-ng-annotate": "~0.3.6",
"gulp-plumber": "^0.6.6",
"gulp-protractor": "~0.0.11",
"gulp-rename": "~1.2.0",
"gulp-replace": "~0.5.0",
"gulp-rev": "~2.0.1",
"gulp-rev-replace": "~0.3.1",
"gulp-sass": "~1.1.0",
"gulp-size": "~1.1.0",
"gulp-uglify": "~1.0.1",
"gulp-useref": "~1.0.2",
"http-proxy": "~1.7.0",
"jshint-stylish": "~1.0.0",
"karma-jasmine": "~0.3.1",
"karma-phantomjs-launcher": "~0.1.4",
"livereload": "^0.3.6",
"main-bower-files": "~2.4.0",
"node-watch": "^0.3.4",
"protractor": "~1.4.0",
"require-dir": "~0.1.0",
"through": "^2.3.6",
"uglify-save-license": "~0.4.1",
"vinyl": "^0.4.6",
"vinyl-fs": "^0.3.13",
"wiredep": "~2.2.0"
},
"engines": {
"node": ">=0.10.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.