Comments (25)
7d769cb
Implements 1, 2 (ng-annotate), and 5.
Minified Bower assets are manual.
from generator-ng-poly.
gulp build
/* Request 404 error for *.map on dev */
Request URL:http://127.0.0.1:8080/platform.js.map
Remote Address:127.0.0.1:8080
Request Method:GET
Status Code:404 Not Found
Host:127.0.0.1:8080
Referer:http://127.0.0.1:8080/
X-Source-Map-Request-From:inspector
/* CSS working on body tag on dev */
home.css:1
body {
background-color: #e5e5e5;
}
bootstrap.css:881
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #ffffff;
}
gulp build --stage prod
/* Request 404 error for *.map on prod */
Request URL:http://127.0.0.1:8080/platform.js.map
Request URL:http://127.0.0.1:8080/angular.min.js.map
Request URL:http://127.0.0.1:8080/angular-animate.min.js.map
Request URL:http://127.0.0.1:8080/angular-cookies.min.js.map
Request URL:http://127.0.0.1:8080/angular-resource.min.js.map
Request URL:http://127.0.0.1:8080/angular-touch.min.js.map
Request URL:http://127.0.0.1:8080/angular-sanitize.min.js.map
Remote Address:127.0.0.1:8080
Request Method:GET
Status Code:404 Not Found
Host:127.0.0.1:8080
Referer:http://127.0.0.1:8080/
X-Source-Map-Request-From:inspector
/* CSS not working on body tag on prod (after concat and minify CSS to one file) */
style.css:1
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
from generator-ng-poly.
Good catch!
Here's the original Gulp style task,
...
// less
stream.queue(gulp.src([
appStyleFiles,
bowerDir + 'bootstrap/less/bootstrap.less',
'!**/*.{scss,styl}'
])
.pipe(less({
paths: [
bowerDir + 'bootstrap/less/**/*.less'
]
})))
;
...
We need to put add bootstrap.less to the stream first. So changing it to:
...
// less
stream.queue(gulp.src([
bowerDir + 'bootstrap/less/bootstrap.less',
appStyleFiles,
'!**/*.{scss,styl}'
])
.pipe(less({
paths: [
bowerDir + 'bootstrap/less/**/*.less'
]
})))
;
...
will fix the issue of the custom CSS being overridden by Bootstrap.
Thank you for bringing that up.
from generator-ng-poly.
Following angular module minifid version will request map file in last line of code (//# sourceMappingURL=angular.min.js.map), browser's network console will show '404 Not Found' message.
gulp build --stage prod
Request URL:http://127.0.0.1:8080/js/angular.min.js.map Request URL:http://127.0.0.1:8080/js/angular-animate.min.js.map Request URL:http://127.0.0.1:8080/js/angular-cookies.min.js.map Request URL:http://127.0.0.1:8080/js/angular-resource.min.js.map Request URL:http://127.0.0.1:8080/js/angular-route.min.js.map Request URL:http://127.0.0.1:8080/js/angular-touch.min.js.map Request URL:http://127.0.0.1:8080/js/angular-sanitize.min.js.map
from generator-ng-poly.
BrowserSync open browser window too fast before gulp build task finished on first time, so we just only got a blank page and need to click browser's reload button to refresh manually. Force BrowserSync to reload before any gulp watch tasks will help to resolve the problem.
gulp.task('watch', function () {
+ browserSync.reload();
gulp.watch([unitTestsFiles], ['unitTest']);
gulp.watch([appMarkupFiles, appScriptFiles, appStyleFiles], ['build', browserSync.reload]);
});
//Before: no force BrowserSync reload on watch task
gulp
[15:12:43] Starting 'clean'... [15:12:43] Starting 'jshint'... [15:12:43] Starting 'browser-sync'... [15:12:43] Finished 'browser-sync' after 3.02 ms [BS] [DEBUG]: Checking if there's an internet connection... [BS] [DEBUG]: Resolved, setting online: true [BS] [DEBUG]: Static Server running (http) ... [BS] [DEBUG]: Running mode: SERVER [BS] Local: >>> http://localhost:3000 [BS] External: >>> http://192.168.0.1:3000 [BS] Serving files from: build/ [15:12:43] Finished 'clean' after 93 ms [15:12:43] Starting 'markup'... [15:12:43] Starting 'style'... [15:12:43] Starting 'fonts'... [15:12:44] Finished 'markup' after 190 ms [15:12:44] Finished 'style' after 749 ms [15:12:44] Finished 'fonts' after 748 ms [15:12:44] gulp-plato: Report generated in report. [15:12:44] Finished 'jshint' after 895 ms [15:12:44] Starting 'scripts'... [BS] [DEBUG]: Browser Connected! (Chrome, version: 36.0.1985.143) [15:12:44] Finished 'scripts' after 50 ms [15:12:44] Starting 'inject'... [15:12:44] Finished 'inject' after 4.61 ms [15:12:44] Starting 'angularInject'... [15:12:44] Finished 'angularInject' after 101 ms [15:12:44] Starting 'build'... [15:12:44] Finished 'build' after 5.02 μs [15:12:44] Starting 'dev'... [15:12:44] Starting 'watch'... [15:12:44] Finished 'watch' after 14 ms [15:12:44] Finished 'dev' after 15 ms [15:12:44] Starting 'default'... [15:12:44] Finished 'default' after 7.68 μs
//After: force BrowserSync reload on watch task
gulp
[15:15:01] Starting 'clean'... [15:15:01] Starting 'jshint'... [15:15:01] Starting 'browser-sync'... [15:15:01] Finished 'browser-sync' after 3.17 ms [BS] [DEBUG]: Checking if there's an internet connection... [BS] [DEBUG]: Resolved, setting online: true [BS] [DEBUG]: Static Server running (http) ... [BS] [DEBUG]: Running mode: SERVER [BS] Local: >>> http://localhost:3000 [BS] External: >>> http://192.168.0.1:3000 [BS] Serving files from: build/ [15:15:01] Finished 'clean' after 87 ms [15:15:01] Starting 'markup'... [15:15:01] Starting 'style'... [15:15:01] Starting 'fonts'... [15:15:02] Finished 'markup' after 587 ms [15:15:02] Finished 'style' after 761 ms [15:15:02] Finished 'fonts' after 772 ms [15:15:02] gulp-plato: Report generated in report. [15:15:02] Finished 'jshint' after 906 ms [15:15:02] Starting 'scripts'... [BS] [DEBUG]: Browser Connected! (Chrome, version: 36.0.1985.143) [15:15:02] Finished 'scripts' after 45 ms [15:15:02] Starting 'inject'... [15:15:02] Finished 'inject' after 5.66 ms [15:15:02] Starting 'angularInject'... [15:15:02] Finished 'angularInject' after 101 ms [15:15:02] Starting 'build'... [15:15:02] Finished 'build' after 6.79 μs [15:15:02] Starting 'dev'... [15:15:02] Starting 'watch'... [15:15:02] Finished 'watch' after 19 ms [15:15:02] Finished 'dev' after 20 ms [15:15:02] Starting 'default'... [15:15:02] Finished 'default' after 4.43 μs [BS] [DEBUG]: Browser Connected! (Chrome, version: 36.0.1985.143)
from generator-ng-poly.
06a9736 The browserSync issue has been fixed. Thank you!
In regards to using sourcemaps, I'm going to raise this up as another issue to also include support for sourcemaps when compiling, concating, and minifying app code.
from generator-ng-poly.
0d8df10 Bower components are automatically injected and minified
from generator-ng-poly.
Something wrong between v0.2.10 to v0.2.13
// * gulp/build.js:92
.pipe($.if(isProd, $.ngHtml2js({
moduleName: require('../package.json').name,
declareModule: false
})))
// * gulp/build.js:97
// (Bug)
.pipe(jsFilter)
.pipe($.if(isProd, $.angularFilesort()))
.pipe($.if(isProd, $.concat('app.js')))
.pipe($.if(isProd, $.ngAnnotate()))
.pipe($.if(isProd, $.uglify()))
.pipe($.if(isProd, $.rev()))
- .pipe(gulp.dest(buildJs));
+ .pipe(gulp.dest(buildJs))
+ .pipe(jsFilter.restore());
// * protractor.config.js:4
// (e2e test for Chrome version over 35)
- browserName: 'chrome'
+ browserName: 'chrome',
+ chromeOptions: {
+ args: ['--test-type']
+ }
// * package.json:2
// (ngHtml2js get from this)
-"name": "track",
+"name": "<%= appName %>",
from generator-ng-poly.
6a1e253 Thank you. This adds your fixes.
from generator-ng-poly.
The wiredep should not be using the bootstrap.js with the angular-ui-bootstrap.js (ui-bootstrap-tpls.js) library for 'bowerCopy' gulp task .
http://stackoverflow.com/questions/24104336/dropdown-of-navbar-is-double-clicked
from generator-ng-poly.
Thank you. If you're needing a fix right now, you can add an exclude option to wiredep:
$.wiredep({exclude: [/bootstrap[.]js/]})
This will prevent bootstrap.js from being injected. I'll try to get this added to the generator tomorrow.
from generator-ng-poly.
f54cc6b Add wiredep exclude
from generator-ng-poly.
'browserSync' task should be start after 'build', not parallel task run with 'build'.
// * Gulpfile.js:7
-gulp.task('dev', ['build', 'browserSync'], function () {
+gulp.task('dev', ['build'], function () {
+ gulp.start('browserSync');
gulp.start('watch');
});
jsFilter.restore() should be put in last line, otherwise all .js and .html will be copy to js folder.
// * gulp\build.js:99
.pipe(jsFilter)
.pipe($.if(isProd, $.angularFilesort()))
.pipe($.if(isProd, $.concat('app.js')))
.pipe($.if(isProd, $.ngAnnotate()))
.pipe($.if(isProd, $.uglify()))
.pipe($.if(isProd, $.rev()))
- .pipe(jsFilter.restore())
- .pipe(gulp.dest(buildConfig.buildJs));
+ .pipe(gulp.dest(buildConfig.buildJs))
+ .pipe(jsFilter.restore());
from generator-ng-poly.
d4dcafa Fixes both of these issues. Thank you!
from generator-ng-poly.
The jsFilter.restore() must be added at last line, because 'gulp --stage prod' will report ngHtml2js error on Chrome console when didn't have jsFilter.restore() at last line.
// * gulp/build.js:104
.pipe($.if(isProd, $.concat('app.js')))
.pipe($.if(isProd, $.ngAnnotate()))
.pipe($.if(isProd, $.uglify()))
.pipe($.if(isProd, $.rev()))<% if (polymer) { %>
.pipe($.addSrc($.mainBowerFiles({filter: /platform/})))<% } %>
- .pipe(gulp.dest(buildConfig.buildJs));
+ .pipe(gulp.dest(buildConfig.buildJs))
+ .pipe(jsFilter.restore());
from generator-ng-poly.
9489b7c Adds this line
That's odd. I'm not getting the same error with the line missing. Adding the line didn't seem to change anything for me either, so adding it for those getting the issue. Thanks again.
from generator-ng-poly.
Recommand imagemin only run on production stage to save time for build up on development stage. It's only save small amount of space, but spent more time for build and watch tasks.
// * gulp/build.js
// copy and optimize images into build directory
gulp.task('images', ['clean'], function () {
return gulp.src(appImages)
- .pipe($.imagemin())
+ .pipe($.if(isProd, $.imagemin()))
.pipe(gulp.dest(buildConfig.buildImages));
})
Recommand to replace the link and script tag's src path from hardcode to build.config.sys, It's easy for resource folder customization.
// * build.config.js
module.exports = {
+ // link directories
+ linkCss: 'css/',
+ linkJs: 'js/',
// build directories
buildDir: 'build/',
buildCss: 'build/css/',
buildFonts: 'build/fonts/',
buildImages: 'build/images/',
buildJs: 'build/js/'
};
// * gulp/build.js
return gulp.src(buildConfig.buildDir + 'index.html')
.pipe($.wiredep.stream({
exclude: [/bootstrap[.]js/],
fileTypes: {
html: {
replace: {
css: function (filePath) {
- return '<link rel="stylesheet" href="' + 'css/' + filePath.split('/').pop() + '">';
+ return '<link rel="stylesheet" href="' + buildConfig.linkCss + filePath.split('/').pop() + '">';
},
js: function (filePath) {
- return '<script src="' + 'js/' + filePath.split('/').pop() + '"></script>';
+ return '<script src="' + buildConfig.linkJs + filePath.split('/').pop() + '"></script>';
}
}
}
}
}))
.pipe(gulp.dest(buildConfig.buildDir));
from generator-ng-poly.
64210c4 Imagemin is ran in prod only
1f6d773 I took a different approach with the wiredep replace. I used the buildCss and buildJs, but removed the buildDir portion from both. This way users don't have to repeat themselves as much. If there's something I'm overlooking with this approach and your method takes care of that we can definitely change it to yours.
Thank you again!
from generator-ng-poly.
No error message at gullp-plumber and console for lint task and styles task.
// * gulp/analyze.js
var coffeeFilter = $.filter('**/*.coffee')
, jsFilter = $.filter('**/*.js')
, onError = function (err) {
$.notify.onError({
- title: 'Error linting the JS',
+ title: 'Error linting at <%= error.plugin %>',
subtitle: ' ', //overrides defaults
- message: ' ', //overrides defaults
+ message: '\n' + err.message.replace(/\u001b\[.*?m/g, ''), //overrides defaults
sound: ' ' //overrides defaults
})(err);
this.emit('end');
};
return gulp.src([
appScriptFiles,
e2eFiles,
unitTests
])
.pipe($.plumber({errorHandler: onError}))
.pipe(coffeeFilter)
.pipe($.coffeelint())
.pipe($.coffeelint.reporter())
.pipe($.coffeelint.reporter('fail'))
.pipe(coffeeFilter.restore())
.pipe(jsFilter)
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.jshint.reporter('fail'))
.pipe($.jscs());
// * gulp/build.js
var lessFilter = $.filter('**/*.less')
, scssFilter = $.filter('**/*.scss')
, stylusFilter = $.filter('**/*.styl')
, onError = function (err) {
$.notify.onError({
- title: 'Syntax error in CSS',
+ title: 'Syntax error at <%= error.plugin %>',
subtitle: ' ', //overrides defaults
- message: ' ', //overrides defaults
+ message: '\n' + err.message.replace(/\u001b\[.*?m/g, ''), //overrides defaults
sound: ' ' //overrides defaults
})(err);
this.emit('end');
};
return gulp.src([
appStyleFiles
])
.pipe($.plumber({errorHandler: onError}))
.pipe(lessFilter)
.pipe($.less())
.pipe(lessFilter.restore())
.pipe(scssFilter)
.pipe($.sass())
.pipe(scssFilter.restore())
.pipe(stylusFilter)
.pipe($.stylus({
use: $.nib()
}))
.pipe(stylusFilter.restore())
After version 0.4.19, 'npm install -g generator-ng-poly' only have '.npmignore' and no '.gitignore' in generator-ng-poly\app\templates\ folder, and can't build successful.
from generator-ng-poly.
Thanks. I'll add those updated notify messages.
Can you try updating generator-ng-poly? I'm not sure a .npmignore file is getting in there. I don't believe we have any of those in this project. Also odd about the missing .gitignore file.
from generator-ng-poly.
When packaging using just a .gitignore
file, npm seems to convert it to an .npmignore
file and then include it with the package.
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info attempt registry request try #1 at 10:41:39
npm info install [email protected] into d:\javascript\npm
npm info installOne [email protected]
npm info preuninstall [email protected]
npm info uninstall [email protected]
npm info postuninstall [email protected]
npm verb tar unpack d:\javascript\npm-cache\generator-ng-poly\0.4.21\package.tgz
npm verb tar unpacking to d:\javascript\npm\node_modules\generator-ng-poly
npm verb gentlyRm vacuuming d:\javascript\npm\node_modules\generator-ng-poly
npm sill gunzTarPerm extractEntry genBase/index.js
npm sill gunzTarPerm extractEntry app/index.js
npm sill gunzTarPerm extractEntry app/templates/.npmignore
npm sill gunzTarPerm extractEntry app/templates/watch.js
npm sill gunzTarPerm extractEntry app/templates/protractor.config.js
npm sill gunzTarPerm extractEntry app/templates/analyze.js
npm sill gunzTarPerm extractEntry app/templates/_test.js
npm sill gunzTarPerm extractEntry app/templates/_app.js
npm sill gunzTarPerm extractEntry app/templates/_karma.config.js
npm sill gunzTarPerm extractEntry app/templates/_build.config.js
npm sill gunzTarPerm extractEntry app/templates/_build.js
npm sill gunzTarPerm extractEntry app/templates/_gulpfile.js
npm sill gunzTarPerm extractEntry app/templates/_package.json
npm sill gunzTarPerm extractEntry app/templates/.editorconfig
npm sill gunzTarPerm extractEntry app/templates/_index.html
npm sill gunzTarPerm extractEntry app/templates/_index.jade
npm sill gunzTarPerm extractEntry app/templates/_bower.json
npm sill gunzTarPerm extractEntry app/templates/_index.haml
npm sill gunzTarPerm extractEntry app/templates/_readme.md
npm sill gunzTarPerm extractEntry app/templates/_app.coffee
npm sill gunzTarPerm extractEntry app/templates/.jshintrc
npm sill gunzTarPerm extractEntry app/templates/.jscsrc
npm sill gunzTarPerm extractEntry app/templates/.bowerrc
npm sill gunzTarPerm extractEntry value/index.js
from generator-ng-poly.
bb4600f Added gulp-notify info
03f8b56 Added .npmignore file. Thanks for catching that!
from generator-ng-poly.
888d149 Ok, now it's really fixed.
from generator-ng-poly.
cssRebaseUrls and cssUrlAdjuster are not working with URL and DataURI
// * build/app/css/app.css
background-image: url(https://www.npmjs.com/static/images/npm-logo.svg);
=>
background-image: url("../https:/www.npmjs.com/static/images/npm-logo.svg");
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhUAAAFAAQMAAAAxgRzkAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAACxJREFUeNrtwTEBAAAAwqD1T20KP6AAAAAAAAAAAAAAAAAAAAAAAAAAAAA+BlUAAAEYkol+AAAAAElFTkSuQmCC);
=>
background-image: url("../app/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhUAAAFAAQMAAAAxgRzkAAAAA1BMVEX/+nxBvIAAAAAXRSTlMAQObYZgAAACxJREFUeNrtwTEBAAAAwqD1T20KP6AAAAAAAAAAAAAAAAAAAAAAAAAAAAA+BlUAAAEYkol+AAAAAElFTkSuQmCC");
// * gulp/build.js
- .pipe($.if(isProd, $.cssRebaseUrls()))
+ .pipe($.if(isProd, $.cssRebaseUrls({
root: appBase
})))
- .pipe($.if(isProd, $.cssUrlAdjuster({
prepend: '../'
})))
from generator-ng-poly.
361651a Sorry for the late response. Thank you for bringing this up.
from generator-ng-poly.
Related Issues (20)
- Angular Bootstrap needs update to work with Angular 1.4.*
- Optional documentation generator with Dgeni HOT 1
- Process SCSS main files from bower packages HOT 1
- Help with understanding route file style vs John Papa style HOT 2
- 'unitTest' errored in a newly created ng-poly project HOT 3
- Lint for TypeScript HOT 1
- Implement directives as classes when using TypeScript HOT 3
- Add Support for $locationProvider.html5Mode(true); HOT 2
- Initial setup succeeds but can not generate anything on OS X 10.11.4 HOT 1
- TypeError: Path must be a string. Received null HOT 4
- [request] Add support for inlining critical path assets
- Getting TypeError: _.invokeMap is not a function when trying to generate services, modules... HOT 5
- Deploy Angular app in Windows Server? HOT 3
- Edit or Disable Indent Checks on Linters HOT 2
- import and export es6 HOT 2
- Create multiple index file
- speeding up dev env
- Gulp production build terminated
- 'unitTest' terminates with error 'Cannot start PhantomJS'
- [Help Needed] Trying to use Bootstrap v3.3.7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from generator-ng-poly.