gulp-inject does not working with event-stream.
var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
var inject = require('gulp-inject');
var es = require('event-stream');
var config = {
sassDir: './resources/assets/sass',
jsPath: './resources/app',
fontDir: './resources/fonts',
imageDir: './resources/images',
bowerDir: './bower_components'
};
gulp.task('index', function () {
return gulp.src('./resources/index.html')
.pipe(inject(gulp.src(mainBowerFiles('**/*.js'), {read: false}), {name: 'bower'}))
.pipe(inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false}))))
.pipe(gulp.dest('./public'));
});
The result coming like this.
<!-- inject:js -->
<script src="/resources/app/core.js"></script>
<script src="/resources/app/first-folder/01.js"></script>
<script src="/resources/app/second-folder/02.js"></script>
<!-- endinject -->
Unfortunately the mainBowerFiles('**/*.js') do not merge with inject(es.merge(gulp.src(config.jsPath + '/**/*.js', {read: false})))
Your problem is that you're invoking inject() twice with two different sources (the main bower files and the files in resources/app), but you want both sources to be injected into the same section.
What you need to do is call inject() once with the already merged sources:
gulp.task('index', function () {
return gulp.src('./resources/index.html')
.pipe(inject(es.merge(
gulp.src(mainBowerFiles('**/*.js'), {read: false}),
gulp.src(config.jsPath + '/**/*.js', {read: false})
)))
.pipe(gulp.dest('./public'));
});
EDIT: If you want to keep the order of the files you can use streamqueue instead of es.merge():
var streamqueue = require('streamqueue');
gulp.task('index', function () {
return gulp.src('./resources/index.html')
.pipe(inject(streamqueue({ objectMode: true },
gulp.src(mainBowerFiles('**/*.js'), {read: false}),
gulp.src(config.jsPath + '/**/*.js', {read: false})
)))
.pipe(gulp.dest('./public'));
});
Related
I am trying to get use of all monaco-eaditor features, so I will combine the monaco-diff editor with monaco-yaml plugin.
I was able to build the monaco-diff editor following this
https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-hello-diff-world.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.js"></script>
<script>
require.config({ paths: {'vs': 'https://unpkg.com/monaco-editor#0.20.0/min/vs'}});
window.MonacoEnvironment = { getWorkerUrl: () => proxy }
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/monaco-editor#0.20.0/min/'
};
importScripts('https://unpkg.com/monaco-editor#0.20.0/min/vs/base/worker/workerMain.js');
`], { type: 'yaml' }));
require([
'vs/editor/editor.main'
], function () {
var lhsModel = monaco.editor.createModel(value, 'yaml');
var rhsModel = monaco.editor.createModel(value, 'yaml');
diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
enableSplitViewResizing: false,
});
diffEditor.setModel({
original: lhsModel,
modified: rhsModel
});
</script>
However I am not able to find a tutorial to add the monaco-yaml, can someone provide me with a link,tutorial or any useful steps ?
When I run protractor I keep getting the error that no specs are found. I have tried a specific single file, 1 directory e2e/*.js and an entire tree e2e/**/*.js.
protractor.config.js
exports.config = {
specs: ['e2e/**/*.js'],
capabilities:{
browserName: 'chrome',
debug: true
},
localSeleniumStandaloneOpts:{
port:8082
}
}
gulpfile.js
'use strict';
var gulp = require('gulp');
var protractor = require("gulp-protractor").protractor;
// Setting up the test task
gulp.task('protractor', function(callback) {
gulp
.src(['e2e/**/*.js'])
.pipe(protractor({
configFile: 'protractor.conf.js',
args:['-port','8095']
}))
.on('error', function(e) {
console.log(e);
});
});
e2e/login.specs.js
'use strict';
describe('login to admin app', function(){
beforeEach(function(){
browser.get('http://localhost:3000/#!/login');
it('expect to be on the login page', function(){
expect(browser.findElement(by.className('login-page')).isPresent()).toBe(true);
});
it('login to application', function(){
var loginInput = browser.findElement(by.name('username'));
var passwordInput = browser.findElement(by.name('password'));
var submitButton = browser.findElement(by.tagNam('button'));
loginInput.sendKeys('****');
passwordInput.sendKeys('****');
submitButton.click();
expect(browser.getCurrentUrl()).toMatch('http://localhost:3000/#!/landing');
});
it('check header after login', function(){
var loginInput = browser.findElement(by.name('username'));
var passwordInput = browser.findElement(by.name('password'));
var submitButton = browser.findElement(by.tagNam('button'));
loginInput.sendKeys('*****');
passwordInput.sendKeys('*****');
submitButton.click();
expect(browser.findElement(by.id('role')));
expect(browser.findElement(by.id('username')));
var languages = brower.findElement(by.className("language"));
expect(language[0][0].getText().toEqual("NL"));
expect(language[1][0].getText().toEqual("FR"));
});
});
});
Did I miss a configuration?
I found it, according to the e2e testing site of AngularJS: https://docs.angularjs.org/guide/e2e-testing everything is divided into code blocks. So within describe function you have beforeEach, afterEach and it.
And I put my 'it' functions within 'beforeEach'.
describe('login to admin app', function(){
beforeEach(function(){
browser.get('http://localhost:3000/#!/login');
});//this line was missing
it('expect to be on the login page', function(){
expect(browser.findElement(by.className('login-page')).isPresent()).toBe(true);
});
it('login to application', function(){
var loginInput = browser.findElement(by.name('username'));
var passwordInput = browser.findElement(by.name('password'));
var submitButton = browser.findElement(by.tagNam('button'));
loginInput.sendKeys('****');
passwordInput.sendKeys('****');
submitButton.click();
expect(browser.getCurrentUrl()).toMatch('http://localhost:3000/#!/landing');
});
it('check header after login', function(){
var loginInput = browser.findElement(by.name('username'));
var passwordInput = browser.findElement(by.name('password'));
var submitButton = browser.findElement(by.tagNam('button'));
loginInput.sendKeys('****');
passwordInput.sendKeys('****');
submitButton.click();
expect(browser.findElement(by.id('role')));
expect(browser.findElement(by.id('username')));
var languages = brower.findElement(by.className("language"));
expect(language[0][0].getText().toEqual("NL"));
expect(language[1][0].getText().toEqual("FR"));
});
});
I am trying to use KendoUI datetimepicker in my angular(1.x) project. When I directly reference the KendoUI js file in my index.html page, it works fine. But when i try to add a reference to it via gulp, it keeps on throwing the following error:
Uncaught ReferenceError: module is not defined at kendo.ui.core.js:1
In my package.json, I have
"kendo-ui-core": "2017.2.621"
And this is what i have in my gulp file:
/// <reference path="node_modules/moment/moment.js" />
/// <reference path="node_modules/moment/src/moment.js" />
/// <binding BeforeBuild='clean' AfterBuild='build' Clean='clean' />
var gulp = require("gulp"),
rimraf = require("rimraf"),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
concat = require("gulp-concat-sourcemap"),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
ignore = require('gulp-ignore'),
cacheBuster = require('gulp-cache-bust'),
templateCache = require('gulp-angular-templatecache');
var paths = {
webroot: "./build/",
approot: "./app/"
};
paths.fonts = "./fonts/**/*";
paths.less = "./less/**/*.less";
paths.images = "./images/**/*";
paths.js = paths.approot + "**/*.js";
paths.specs = paths.approot + "**/*.spec.js";
paths.views = paths.approot + "**/*.html";
gulp.task("clean", function (cb) {
rimraf(paths.webroot, cb);
});
gulp.task('jshint', function () {
return gulp.src(paths.js)
.pipe(ignore.exclude('*.spec.js'))
.pipe(jshint('jshint.config.json'))
.pipe(jshint.reporter('gulp-jshint-file-reporter', {
filename: __dirname + '/jshint-output.log'
}));
//.pipe(jshint.reporter("fail")); // Throw error and fail build
});
gulp.task("build:js", function () {
return gulp.src([
paths.approot + "**/*.module.js",
paths.approot + "**/*.config.js",
paths.js,
"!" + paths.specs
])
.pipe(concat('app.js', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "app/"));
});
gulp.task("build:views", function () {
return gulp.src([paths.views])
.pipe(templateCache({ root: "app", module: "goalEnvision" }))
.pipe(gulp.dest(paths.webroot + "app/"));
});
gulp.task("build:fonts", function () {
return gulp.src([
paths.fonts,
'node_modules/bootstrap/dist/fonts/*',
'node_modules/bootstrap-less/fonts/*'
])
.pipe(gulp.dest(paths.webroot + "fonts/"));
});
gulp.task("build:less", function () {
return gulp.src(["./less/**/app.less"]) //compile app + theme less files
.pipe(less({
paths: [
'.',
'node_modules/angucomplete-alt/angucomplete-alt.css'
//'./node_modules/bootstrap-less',
]
}))
.pipe(gulp.dest(paths.webroot + "css/"));
});
gulp.task("build:images", function () {
return gulp.src([paths.images])
.pipe(gulp.dest(paths.webroot + "images/"));
});
gulp.task("build:index.html", function () {
return gulp.src("index.html")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build:favicon.ico", function () {
return gulp.src("favicon.ico")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build:cache-bust", ["build:index.html", "build:js", "build:less", "build:libs.js", "build:libs.css"], function () {
return gulp.src(paths.webroot + "index.html")
.pipe(cacheBuster())
.pipe(gulp.dest(paths.webroot));
});
gulp.task('build:libs.js', function () {
gulp.src([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/angular/angular.min.js',
'node_modules/angular-dynamic-locale/dist/tmhDynamicLocale.min.js',
'node_modules/angular-xeditable/dist/js/xeditable.min.js',
'node_modules/angular-file-upload/dist/angular-file-upload.min.js',
'node_modules/angular-loading-bar/build/loading-bar.min.js',
'node_modules/ng-img-crop/compile/minified/ng-img-crop.js',
'node_modules/angular-ui-router/release/angular-ui-router.min.js',
'node_modules/angular-local-storage/dist/angular-local-storage.min.js',
'node_modules/highcharts/highcharts.js',
'node_modules/highcharts-ng/dist/highcharts-ng.min.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
'node_modules/angular-translate/dist/angular-translate.min.js',
'node_modules/angular-animate/angular-animate.min.js',
'node_modules/angular-toastr/dist/angular-toastr.min.js',
'node_modules/angular-toastr/dist/angular-toastr.tpls.min.js',
'node_modules/jquery-ui-dist/jquery-ui.min.js',
'node_modules/angular-ui-sortable/dist/sortable.min.js',
'node_modules/angular-touch/angular-touch.js',
'node_modules/sweetalert/dist/sweetalert.min.js',
'node_modules/angular-sweetalert/SweetAlert.min.js',
'node_modules/moment/min/moment.min.js',
'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js',
'node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js',
'node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js',
//inkluderas i common/components/guide behövde ändra i källkoden för att disabla automatisk scrolling
//'node_modules/angular-tour/dist/angular-tour-tpls.js',
'node_modules/angular-moment/angular-moment.min.js',
'node_modules/angular-sanitize/angular-sanitize.js',
'node_modules/angular-bootstrap-confirm/dist/angular-bootstrap-confirm.js',
'node_modules/angular-hotkeys/build/hotkeys.min.js',
'node_modules/angucomplete-alt/dist/angucomplete-alt.min.js',
'node_modules/angular-sticky-plugin/dist/angular-sticky.min.js',
'node_modules/kendo-ui-core/js/kendo.ui.core.js',
//Tried with different permutation/combination of these files as well
//'node_modules/kendo-ui-core/js/kendo.core.js',
//'node_modules/kendo-ui-core/js/kendo.popup.js',
//'node_modules/kendo-ui-core/js/kendo.calendar.js',
//'node_modules/kendo-ui-core/js/kendo.datepicker.js',
//'node_modules/kendo-ui-core/js/kendo.timepicker.js',
//'node_modules/kendo-ui-core/js/kendo.datetimepicker.js',
//'node_modules/kendo-ui-core/js/kendo.angular.js',
])
.pipe(concat('libs.js', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "/libs"));
});
gulp.task('build:libs.css', function () {
gulp.src([
'node_modules/angular-toastr/dist/angular-toastr.css',
'node_modules/sweetalert/dist/sweetalert.css',
'node_modules/angular-bootstrap-datetimepicker/src/css/datetimepicker.css',
'node_modules/angular-xeditable/dist/css/xeditable.css',
'node_modules/ng-img-crop/compile/minified/ng-img-crop.css',
'node_modules/angular-loading-bar/build/loading-bar.css',
'node_modules/bootstrap-toggle/css/bootstrap-toggle.css',
'node_modules/angular-tour/dist/angular-tour.css'
])
.pipe(concat('libs.css', { sourcesContent: true }))
.pipe(gulp.dest(paths.webroot + "/libs"));
});
gulp.task("build:webconfig", function () {
return gulp.src("Web.config")
.pipe(gulp.dest(paths.webroot));
});
gulp.task("build", ["jshint", "build:js", "build:less", "build:fonts", "build:images", "build:libs.js", "build:libs.css", "build:views", "build:index.html", "build:favicon.ico", "build:cache-bust", "build:webconfig"]);
gulp.task('watchAndBuild', function () {
gulp.watch(paths.js, ['build']);
gulp.watch(paths.views, ['build']);
});
The exact line where it throws error relates to
I think I am not including the kendoui files in the correct manner. What changes do I need to get it working?
The only way I was able to solve this error was by including a direct reference to the kendo ui js file in the index.html. Hope it will help others.
I have a site, which technically consists of a number of separate SPAs.
App/Admin
App/Signup
App/MainApp
How should I organize the App folder and the gulp build to make this into 3-4 separate files / modules that are loaded when required.
Since I had to spend a whole day getting this to work, I will answer my own question.
First, prepare a loader site. This would be the main site that is actually loaded that is responsible from loading all the other sites.
App/main.js - Contains the requirejs setup
In this we would run app.setRoot('shell', 'entrance');
App/shell.js - contains the router config
return router.map([
{ route: 'Admin/*all', moduleId: "Admin/index", nav: true },
{ route: 'Signup/*all', moduleId: "Signup/index", nav: true },
{ route: '*all', moduleId: "MainApp/index", nav: true }
])
.buildNavigationModel()
.activate();
App/shell.html - contains the router usage and common header/footer/loading shield
<div style="height: 100%" data-bind="css: { loading: isLoading }">
<!-- ko compose: 'loading.html'--><!-- /ko -->
<div class="header">...</div>
<!-- ko router: { transition:'entrance' } --><!-- /ko -->
</div>
App/*.js - Files shared among all the SPAs
App/MainApp/index.js - Contains the sub router for that SPA
define(["require", "exports", "plugins/router"], function (require, exports, router) {
"use strict";
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'MainApp',
fromParent: false //<!----- FALSE for MainApp, TRUE for other SPA
})
.map([
{ route: '', moduleId: "viewmodels/test", nav: true },
])
.mapUnknownRoutes("viewmodels/err", 'err')
.buildNavigationModel();
return (function () {
function class_1() {
this.router = childRouter;
}
return class_1;
}());
});
App/MainApp/index.html - Uses the router, and performs any rendering of submenues or whatever. Here the bare minimum:
<div data-bind="router: { }"></div>
App/Admin/index.js
Is identical to the MainApp.js, except for the fromParent set to true and moduleId set to the SPAs name.
This should work fine in debug mode now.
The gulp setup becomes:
gulpfile.js
var durandal = require('gulp-durandal');
gulp.task('build', [], function () {
return gulp.start(['build-admin', 'build-signup', 'build-mainapp', 'build-base']);
});
function buildModule(name) {
var path = name + '/';
return durandal({
baseDir: 'App',
output: name + '.js',
minify: true,
almond: false,
verbose: false,
moduleFilter: function (moduleName) {
return moduleName.indexOf(path) > -1;
},
rjsConfigAdapter: function (config) {
config.stubModules = config.exclude;
config.exclude = ["main"];
config.stubModules.push('text');
return config;
}
})
.pipe(gulp.dest('dist'));
}
gulp.task('build-admin', [], function () {
return buildModule('Admin');
});
gulp.task('build-signup', [], function () {
return buildModule('Signup');
});
gulp.task('build-mainapp', [], function () {
return buildModule('MainApp');
});
gulp.task('build-base', [], function () {
return durandal({
baseDir: 'App',
output: 'main.js',
minify: true,
verbose: false,
moduleFilter: function (moduleName) {
return moduleName.indexOf('Admin/') === -1 && moduleName.indexOf('MainApp/') === -1 && moduleName.indexOf('Signup/') === -1;
},
rjsConfigAdapter: function (config) {
config.stubModules = config.exclude;
config.exclude = [];
return config;
}
})
.pipe(gulp.dest('dist'));
});
This will now result in
dist/main.js
dist/Admin.js
dist/MainApp.js
dist/Signup.js
In your default.html (or whatever you call it), you need to tell it how to load these files:
<script>window.require = {
bundles: { 'MainApp': ['MainApp/index'],'Signup': ['Signup/index'], 'Admin': ['Admin/index'] }
};</script>
<script type="text/javascript" data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
The reason for this being in the html files rather than the main.js, is that the bundles are only used for the compiled version.
I'm following this tutorial on using angularjs alongside laravel: http://angular-tips.com/blog/2014/11/working-with-laravel-plus-angular-part-2/. However, if I define a route in config.routes.js which points to a controller, any controller, my app crashes. In the console the error "Error: too much recursion" comes up, along with a useless stack trace.
All my files are exactly the same as in the tutorial, I only changed the name of the route and the controller, but that shouldn't make a difference.
I googled around a bit and it seems this error might be caused by using a wrong version of jquery. I use angularjs 1.3.0 and I have no idea which jquery version my app is using, but I used npm install angular, so it'd be weird if that installed a wrong version, right?
I'm completely lost on why this happens and also very frustrated, so any help would be greatly appreciated.
Thanks.
EDIT: Added code:
app/js/config.routes.js
angular.module('app').config(function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider.when('/transactions',
{
templateUrl: 'features/transactions/transactions.tpl.html',
controller: 'Transactions'
});
});
app/js/transactions/transactions.js:
angular.module('app').controller('Transactions', function($scope, $http)
{
$http.get('/api/transactions').then(function(result)
{
$scope.shows = result.data;
});
});
transactions.tpl.html is empty.
app.js:
angular.module('app', ['ngRoute']);
EDIT 2: added gulp.js
The only thing I changed here is, is that I added the 'webserver' task.
var gulp = require('gulp');
var fs = require('fs');
var plugins = require('gulp-load-plugins')();
var es = require('event-stream');
var del = require('del');
var publicFolderPath = '../public';
var paths = {
appJavascript: ['app/js/app.js', 'app/js/**/*.js'],
appTemplates: 'app/js/**/*.tpl.html',
appMainSass: 'app/scss/main.scss',
appStyles: 'app/scss/**/*.scss',
appImages: 'app/images/**/*',
indexHtml: 'app/index.html',
vendorJavascript: ['vendor/js/angular.js', 'vendor/js/**/*.js'],
vendorCss: ['vendor/css/**/*.css'],
finalAppJsPath: '/js/app.js',
finalAppCssPath: '/css/app.css',
specFolder: ['spec/**/*_spec.js'],
publicFolder: publicFolderPath,
publicJavascript: publicFolderPath + '/js',
publicAppJs: publicFolderPath + '/js/app.js',
publicCss: publicFolderPath + '/css',
publicImages: publicFolderPath + '/images',
publicIndex: publicFolderPath + '/angular.html',
publicJsManifest: publicFolderPath + '/js/rev-manifest.json',
publicCssManifest: publicFolderPath + '/css/rev-manifest.json'
};
gulp.task('scripts-dev', function() {
return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
.pipe(plugins.if(/html$/, buildTemplates()))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.concat('app.js'))
.pipe(plugins.sourcemaps.write('.'))
.pipe(gulp.dest(paths.publicJavascript));
});
gulp.task('scripts-prod', function() {
return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates))
.pipe(plugins.if(/html$/, buildTemplates()))
.pipe(plugins.concat('app.js'))
.pipe(plugins.ngAnnotate())
.pipe(plugins.uglify())
.pipe(plugins.rev())
.pipe(gulp.dest(paths.publicJavascript))
.pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
.pipe(gulp.dest(paths.publicJavascript));
});
gulp.task('styles-dev', function() {
return gulp.src(paths.vendorCss.concat(paths.appMainSass))
.pipe(plugins.if(/scss$/, plugins.sass()))
.pipe(plugins.concat('app.css'))
.pipe(gulp.dest(paths.publicCss));
});
gulp.task('styles-prod', function() {
return gulp.src(paths.vendorCss.concat(paths.appMainSass))
.pipe(plugins.if(/scss$/, plugins.sass()))
.pipe(plugins.concat('app.css'))
.pipe(plugins.minifyCss())
.pipe(plugins.rev())
.pipe(gulp.dest(paths.publicCss))
.pipe(plugins.rev.manifest({path: 'rev-manifest.json'}))
.pipe(gulp.dest(paths.publicCss));
});
gulp.task('images', function() {
return gulp.src(paths.appImages)
.pipe(gulp.dest(paths.publicImages));
});
gulp.task('indexHtml-dev', ['scripts-dev', 'styles-dev'], function() {
var manifest = {
js: paths.finalAppJsPath,
css: paths.finalAppCssPath
};
return gulp.src(paths.indexHtml)
.pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
.pipe(plugins.rename(paths.publicIndex))
.pipe(gulp.dest(paths.publicFolder));
});
gulp.task('indexHtml-prod', ['scripts-prod', 'styles-prod'], function() {
var jsManifest = JSON.parse(fs.readFileSync(paths.publicJsManifest, 'utf8'));
var cssManifest = JSON.parse(fs.readFileSync(paths.publicCssManifest, 'utf8'));
var manifest = {
js: '/js/' + jsManifest['app.js'],
css: '/css/' + cssManifest['app.css']
};
return gulp.src(paths.indexHtml)
.pipe(plugins.template({css: manifest['css'], js: manifest['js']}))
.pipe(plugins.rename(paths.publicIndex))
.pipe(gulp.dest(paths.publicFolder));
});
gulp.task('lint', function() {
return gulp.src(paths.appJavascript.concat(paths.specFolder))
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('jshint-stylish'));
});
gulp.task('testem', function() {
return gulp.src(['']) // We don't need files, that is managed on testem.json
.pipe(plugins.testem({
configFile: 'testem.json'
}));
});
gulp.task('clean', function(cb) {
del([paths.publicJavascript, paths.publicImages, paths.publicCss, paths.publicIndex], {force: true}, cb);
});
gulp.task('watch', ['indexHtml-dev', 'images'], function() {
gulp.watch(paths.appJavascript, ['lint', 'scripts-dev']);
gulp.watch(paths.appTemplates, ['scripts-dev']);
gulp.watch(paths.vendorJavascript, ['scripts-dev']);
gulp.watch(paths.appImages, ['images-dev']);
gulp.watch(paths.specFolder, ['lint']);
gulp.watch(paths.indexHtml, ['indexHtml-dev']);
gulp.watch(paths.appStyles, ['styles-dev']);
gulp.watch(paths.vendorCss, ['styles-dev']);
});
gulp.task('webserver', ['indexHtml-dev', 'images-dev'], function() {
plugins.connect.server({
root: paths.tmpFolder,
port: 5000,
livereload: true,
middleware: function(connect, o) {
return [ (function() {
var url = require('url');
var proxy = require('proxy-middleware');
var options = url.parse('http://localhost:8000/api');
options.route = '/api';
return proxy(options);
})(), historyApiFallback ];
}
});
});
gulp.task('default', ['watch']);
gulp.task('production', ['scripts-prod', 'styles-prod', 'images', 'indexHtml-prod']);
function buildTemplates() {
return es.pipeline(
plugins.minifyHtml({
empty: true,
spare: true,
quotes: true
}),
plugins.angularTemplatecache({
module: 'app'
})
);
}