I am currently working on a function as a test layer for the reaction + stream in our .net application. This is how it is configured.
- We use nodejs as a package manager. we use NodeJs Visual Studio Tools to get the interactive nodejs window in VS and be able to create NodeJs projects. http://nodejstools.codeplex.com/
- The gulp task calls the browser to search the root jsx and find all the dependencies. Gulp also causes the reactivation library to be used to convert jsx files. The concatenated .js file is placed in a directory on our mvc website.
- Gulp copies all the relevant js files to the mvc.net project.
- During development, we use the Visual Studio Task Runner extension to run the Gulp task, which monitors changes, so we don’t need to “continue to build” during development. It uses the watchify library.
- We use Jest for testing - although we had a problem with NodeJs and a joke playing well in the newest version of NodeJs, so we had to downgrade the class to 0.10.36.
- we use TeamCity to run the Gulp task before building our solution (to have a test setup, but have not added it to my new function yet).
Gulp does most of the magic. Here is a copy of our Gulp file (it's dirty, but I was still learning). Many of the tasks are to look at the css js and jsx files, but I hope this helps.
var gulp = require('gulp'); var source = require('vinyl-source-stream'); var browserify = require('browserify'); var watchify = require('watchify'); var reactify = require('reactify'); var concat = require('gulp-concat'); var buffer = require('vinyl-buffer'); var uglify = require('gulp-uglify'); var createbundler = function () { var bundler = browserify({ entries: ['./app/js/VaeApp.jsx'], // Only need the root js file, browserify finds the dependencies transform: [reactify], // We want to convert JSX to normal javascript debug: false, // include sourcemapping for minified scripts? cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify }); return bundler; } gulp.task('js', function () { var bundler = createbundler(); bundler.bundle() .pipe(source('bundle.js')) .pipe(buffer())// <----- convert from streaming to buffered vinyl file object .pipe(uglify()) // Create the initial bundle when starting the task .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js')); }); gulp.task('js-shim-sham', function () { gulp.src('./node_modules/es5-shim/es5-*.min.js') .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js')); console.log("updated shim-sham"); }); gulp.task('js-dev', function () { var watcher = watchify(createbundler()); return watcher .on('update', function () { // When any files update var updateStart = Date.now(); console.log('Updating!'); watcher.bundle().pipe(source('bundle.js')) .pipe(buffer())// <----- convert from streaming to buffered vinyl file object .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js')); console.log('Updated!', (Date.now() - updateStart) + 'ms'); }) .bundle() .pipe(source('bundle.js')) .pipe(buffer())// <----- convert from streaming to buffered vinyl file object // .pipe(uglify()) // Create the initial bundle when starting the task .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js')); }); var runcss = function () { var updateStart = Date.now(); gulp.src('./app/css/document/*.css') .pipe(concat('main.css')) .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/css')); console.log('Updated!', (Date.now() - updateStart) + 'ms'); }; var runimages = function () { var updateStart = Date.now(); gulp.src('./app/img/*.*') .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/img')); console.log('Updated!', (Date.now() - updateStart) + 'ms'); }; gulp.task('styles', function () { runcss(); runimages(); }); gulp.task('styles-dev', function () { runcss(); gulp.watch('./app/css/document/*.css', runcss); runimages(); gulp.watch('./app/img/*.*', runimages); }); // Just running the two tasks gulp.task('build-dev', ['js-dev', 'styles-dev', 'js-shim-sham']); // Just running the two tasks gulp.task('build', ['js', 'styles', 'js-shim']);