I cannot find any gulp html task. Am i missing something?

Are there plans to include LiveReload?

Here is a simple script example:
https://github.com/dmitriz/gulp-automation

There as been an update to gulp-useref (v3) which changes the API breaking the gulp file in this project. The use of $.useref.assets({searchPath: './'}) is now incorrect; resulting in the error TypeError: $.useref.assets is not a function

Hi,

I was currently looking into how gulp-patterns tests, and everything seems fine except when for example we want to test a main layout, like dashboard. (so testing the layout, not the controller)

    el = angular.element(
        '<div ng-include="app/dashboard/dashboard.html" ng-controller="Dashboard as vm"></div>');

    scope = $rootScope;
    var compiledEl = $compile(el)(scope);

    // The spec examines changes to these template parts
    searchElement = compiledEl.find('.dashboard .searchBtn'); // the button to click

What I don't understand is why the compiledEl has no include at all.

This project creates/generates the templates.js file, which includes all layout templates. so the $templateCache is populated. The karma seems to be configured to work with that.

but still, I cannot get the simple dashboard to work.

Any suggestion ?

Following instructions on the ReadMe doc for the installation process and came up with the error below. The weird thing is that I did the same process yesterday with no problems. Trying it again to see if it happens will keep the issue updated.

Error: Cannot find module 'utf8'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (......../gulp-patterns/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/engine.io-parser/lib/index.js:5:12)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

Hello
I'm starting with angular and when starting the server to check if all is well, I have this error
C: \ angular> gulp
[14:12:09] Using gulpfile C: \ angular\ gulpfile.js
[14:12:09] Starting 'server' ...
[14:12:09] Finished 'server' after 24 ms
[14:12:09] Starting 'inject' ...
[14:12:09] 'inject' errored after 17 ms
[14:12:09] Error in plugin 'Gulp-inject'
message:
There is no read option. Did you mean to Provide for gulp.src Perhaps it?
[14:12:09] Server started http: // localhost: 3000
[14:12:09] LiveReload started on port 35729

I am using this version [email protected]

Someone could help me. Thanks for your time

Great project - I am finding it very useful to learn gulp best practices.

It seems that running gulp commands is changing source files. For example:

1. gulp serve-dev is changing src/client/index.html.
2. gulp serve-specs is changing src/client/specs.html.

Is this intentional?

When you use clean-fonts in the fonts task and you run the fonts task twice,it will fail 1 time.

If you run them separate , so first gulp task clean-fonts and then fonts,it works always.

It seems there is some problem with the creation of the 4.4.0 subdirectory data in the pipeline.

When you put a wait before the copy it works for me, you can put a wait of 50 instead of 1500,but with 1500 you see the directories dissapear and re-appear in visual studio code.

I think the bug is that the copy starts for the fonts in the directory and subdirectories while the deletion and creation of the subdirectories is still not done yet.

gulp.task('fonts', ['clean-fonts'], function () {

log('Copying fonts');

return gulp

.src(config.root + config.fonts)

.pipe($.wait(1500))

.pipe(gulp.dest(config.build + 'fonts'));

});

DeleteShare

Test fails for:
it('with id ' + id, function() {
expect(dataservice.getCustomer).to.have.been.calledWith(id);
});
getCustomer() doesn't appear to get the .withArgs(id)

should have called dataservice.getCustomer
1 time
‣
with id 1017109
‣
AssertionError: expected getCustomer to have been called with arguments 1017109
getCustomer(undefined) => {
$$state: {
pending: undefined,
processScheduled: false,
status: 1,
value: {
city: "Albany",
firstName: "Black",
id: 1017109,
lastName: "Widow",
state: "NY",
thumbnail: "colleen_papa.jpg",
zip: "12205"
}
}
}
at Context. (src/client/app/customers/customer-detail.controller.spec.js:38:66)
expect(dataservice.getCustomer).to.have.been.calledWith(id);

[...]
beforeEach(function() {
sinon.stub(dataservice, 'getCustomer')
.returns($q.when(mockData.blackWidow))
.withArgs(id);
[...]
describe('after activate', function() {
[...]
it('with id ' + id, function() {
expect(dataservice.getCustomer).to.have.been.calledWith(id);
});
[...]

Ok, after playing around with some systems and some people, a problem was highlighted.
0) "npm install gulp bower -g"

1. "bower install" calls "gulp wiredep"
2. "npm install" will call "bower install".
3. "gulp " requires step 2.

.bowerrc
{
"directory": "bower_components",
"scripts": {
"postinstall": "gulp wiredep"
}
}

npm package.json
"scripts": {
"init": "npm install",
"install": "bower install",
"start": "node src/server/app.js",
"test": "gulp test"
},

So, i think for projects that have existent node_modules and bower_components, the problem is not really visible.

For a fresh project checkout, the circular dependency will show up.
"gulp wiredep"
although convinient, seem to me a bit harmful.

That target anyways is called for "gulp build" or any variation of "gulp serve-". So it won't have side-effects to remove "gulp wiredep" from the bower .bowerrc file.

// del 1.x
del(patterns, [options], callback)

// del 2.x
del(patterns, [options])

So, clean function should upgrade like:

// with del 1.x
function clean(path, done) {
    log('Cleaning: ' + $.util.colors.blue(path));
    del(path, done);
}

// with del 2.x
function clean(path) {
    return del(config.distribution.scripts);
}

Description from this (http://stackoverflow.com/questions/32770896/nodes-del-command-callback-not-firing) Stackoverflow question:
"The callback on the del function is not firing. The del function is running, file are deleted, I see no error messages. If I call the callback manually it executes, so looks like the function is in tact. So I am wondering what would cause del not to want to execute the callback."

This seems to be the solution:
"The [del] API now returns a promise instead of accepting a callback function."
https://github.com/sindresorhus/del/releases/tag/v2.0.0

Quite important feature, since the highly optimized output of CSS and JS cannot be debugged in a production environment.

#88

model after the mocha spec runner that ward modified

Please help me out fixing this. After gulp serve-build completes Firefox launches with this error message. It seems Firefox doesn't get connected. There is no 'browser connected' output in the console.

Hey John - Great course - entertaining and educational as always. One question - what's the deployment strategy? running gulp build (or it's variants) - only outputs the client-side code to the build folder. What's the process/strategy for deploying the server-side code as well?

Can you please explain the purpose of bardjs? It seems to me that following two are equivalent (one using bard and another without):

beforeEach(inject(function($controller, $q, $rootScope, 'dataservice') { }

beforeEach(function() {
    bard.inject('$controller', '$q', '$rootScope', 'dataservice');
});

absract -> abstract

https://github.com/johnpapa/gulp-patterns/blob/master/src/client/app/customers/customers.route.js#L18

Greetings,

When using gulp-pattern and I have an error, I would like to disable full logging in production so that it does not show path to source code?

http://localhost:7203/src/client/app/vms/vms.controller.js:101:16

Thanks!!

Hi

I was wondering why chai-as-promised is included in package.json but it is not included in gulp.config.js under testlibraries.

Karma does not seem to be configured to use it either in karma.conf.js under frameworks

Am I missing something here?

Do you not need to also install https://github.com/vlkosinov/karma-chai-as-promised and update karma.conf.js like this: https://github.com/vlkosinov/karma-chai-as-promised#usage ?

I cloned the repository and followed the instructions, but when I got to the "gulp serve-dev" step, I received the following error:

/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-less/index.js:68
}).done(undefined, cb);
^
TypeError: undefined is not a function
at DestroyableTransform._transform (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-less/index.js:68:8)
at DestroyableTransform.Transform._read (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at write (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-plumber/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-plumber/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/Users/rchawdry/tmp/gulptest/gulp-patterns/node_modules/gulp-plumber/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at DestroyableTransform.emit (events.js:129:20)

Installing gulp-less via "npm install gulp-less" fixed the issue. Wasn't sure if this needed to be added to the package.json to make sure its downloaded before use.

Can you add login modular and authorize for menu?

Just an FYI, the latest version of bootstrap breaks the wiredep functionality and does not properly inject the bootstap.css file when you get to the "Removing Scripts and Styles From the Main HTML" section.

The fix for me was to simply target bootstrap 3.3.2 directly. Removing the ~ from the bower.json file entry and running bower install again forced 3.3.2.

Awesome course!

John I believe i found a bug in the inject/order functions.
The read option {read: false} is given to the gulp-inject function instead of the gulp.src.
So i got this error because of it:
[14:35:17] Wiring the bower dependencies into the html
[14:35:17] 'wiredep' errored after 51 ms
[14:35:17] Error in plugin 'gulp-inject'
Message:
There is no read option. Did you mean to provide it for gulp.src perhaps?

Rg,
Stefan

lots of exception cases, may not be worth it over an explicit list

Hi, there,

I'm trying to migrate a Gulp process to include Typescript and I'm stumbling upon several issues I'd be more than happy to discuss with its team, but on its issues page, they just redirect discussions to stackoverflow; weel, I posted my question there, but I'm not having much feedback. Since this is an important source for many developers, I hope my questions about the build process of an Angular application will be heard:

1. why use Bower? all bower packages yoman bloated into the initial build process exist in Npm; I don't like using more than one single tool for the same job;
2. why use an automatic plugin loader? it's easy, too easy, to forget plugins used for tests on local environment; having them available to the Gulp process feels like magic (or voodoo, pick yours);
3. why automatically binding the automatically loaded plugins on their names on "gulp.config.js"? one very nice feature of the Gulp streams is to allow composition in a very natural way, but using this pattern just make it not possible and turns Gulp almost into ... Grunt;
4. why not use javascript-aware tool to make the bundle (like browserify, webpack, ...)? bundling all javascript files together requires for the developer to know all the subtle dependencies among libraries -- I already had a hard to spot problem when jQuery was loaded after Angular and the pseudo selector ":first" would yield nothing, without any compilation or run-time error;
5. why use such plugins as "gulp-inject" or "usemin"? I see Angular applications as javascript that happen to have HTML views, instead of HTML pages that happen to have javascript behavior; that way, I just have exactly two 'script' tags, one for my code, one for vendor's and the same for css; I believe file transversing should follow the language specifications (JS/TS and CSS) and produce deterministic outputs that could be statically named on the application loader (index.html).
6. why include image optimization into the application build process?

Please consider these questions as very sincere -- of course, it's possible to spot some preferences, due to many headaches I had before but, utterly -- I want to understand the whys, as there are many, many ways to solve the same problem.

less from .tmp

fastest reload

Is it possible to integrate this particular test app with requireJS, so it would be more scalable ?

Thanks

Mikhail

I am evaluating the possibility to use your gulp-patterns as a starting point for several web dev projects we have for this fiscal year and next. The build on the development side works just fine. But when I attempt to build for production I am running into node error directly or during gulp-inject 1 file into index.html (its using gulp-ng-annotate (ng-annotate-main.js at line 330). Node is having issues with Cannot assign to read only property '$methodName' of false.

I have double checked to make sure that I am using the same version of ng-annotate that you are in your project. Got any ideas??
Tony

Hi John,

I have done some related-work recently for localization support.

• It was quite nice implemented using (https://angular-gettext.rocketeer.be/).
• Extended gulpfile.js/gulpconfig.js: added a task for extracting translations and a task for compiling the translations.
• Added a /localization/ directory containing: template.pot and locale like en_US.po, etc.

There was a minor problem with making translations dynamically available, since they need a 1 time compilation. So I generated them anyway in the /build/ directory, and make the server recognize them.

I could provide the changes I did, even if they are not optimal.

Cheers,
Igor

when called templatecache clean-code is called but not template cache.

gulp.task('templatecache', ['clean-code'], function () {
log('Creating AngularJs templateCache');
return gulp.src(config.htmltemplates)
.pipe($.minifyHtml({ empty: true }))
.pipe($.angularTemplatecache(config.templateCache.files, config.templateCache.options))
.pipe(gulp.dest(config.temp));
});

When I go through the following steps:
$ npm install
$ bower install
$ tsd install -r -o --save
$ gulp serve-dev

The final step results in the following error:
gulp-patterns] Watching files...
About to crank up node
PORT=7203
NODE_ENV=dev
** DEV **
events.js:85
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE
at exports._errnoException (util.js:746:11)
at Server._listen2 (net.js:1129:14)
at listen (net.js:1155:10)
at Server.listen (net.js:1240:5)
at EventEmitter.listen (/##########/gulpTest/node_modules/express/lib/application.js:617:24)
at Object. (/##########/gulpTest/src/server/app.js:63:5)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
[10:15:38] *** nodemon crashed: script crashed for some reason
[10:15:38] [nodemon] app crashed - waiting for file changes before starting...

NOTE: I replaced the path that was displayed in the output with ##########.

I have the problem with going to the specific page of the application after the build was created and app was moved to the web server.

Example: App was moved to the server www.testserver.com to the folder angular. I've changed the base href attribute in the index.html file after the build:

We are trying to access it using http://www.testserver.com/angular/customers for example but getting 404 and route is not being hit at all even though all js files were loaded.

Is that a known issue ?

BTW If I try access the page using the pound sign reference, the app at least tries to load the correct route.

http://www.testserver.com/angular/#/customers

Thanks

Mikhail

Hi John,

I have done some related-work recently where we target different deployments.

The basic requirement was configuration based on 3 profiles (production, integration/test, local) that included:

• configuration of 1 or many REST endpoints
• the root base the application it self. (contained usually in the index.html)

The gulp-config works well for project structure/resources related things but it works less good when deployment-related configuration is needed.

What I did was:

• created a /profile/ directory containing a json file per "profile target"
  {
  "end-point-url" : ''http://...."
  "app-root-base" : "/test/"
  }
• Extend the gulpfile.js/gulp.config.js files to add a profile variable so that we can call:
  gulp build --profile production
  in the case a /profile/production.json file exists, then that configuration would be used.
• There would be some constants/configuration js file that has some @@constants_ids that would be replaced when matched.
• Process the JS for constant replacement
• Text-replace the to whatever is declared under "app-root-base"

The challenge was of course how to keep the configuration working for both:
1)the "production" processed/optimized code/application. (easy case since it just go through the regular gulp stream)
2)the local dev non-optimized. (difficult case)

The reason why #2 is difficult is because the resources js/html are not processed by gulp, therefore no text-replace nor constant js can be generated that would be recognized. I don't like my solution since @@constants_ids has default value in case it does not get replaced.
=> Effectively making /profile/localdev.json a difficult case.
Also, one cannot cleanly update index.html, otherwise, it would be check-in depending on the profile you used on the gulp call. (this is less of a problem, as the root "/" is good enough)

Perhaps there would be a more cleaver way to achieve it ?

(I could provide the changes I did, even if they are clearly ugly.)

Cheers