calebds / healthy-gulp-angular Goto Github PK
View Code? Open in Web Editor NEWA starting point for Gulp + Angular
A starting point for Gulp + Angular
With node.js v4.x "gulp-sass" version within Package.json should be moved to "^2.0.0" or system will fail on libsass. Error message is not very explicit:
Loading "sass.js" tasks...ERROR
Error:libsass
bindings not found. Try reinstallingnode-sass
?
Warning: Task "sass" not found. Use --force to continue.
I have a doubt why nothing was injected in dist.dev/index.html
.
Issue referenced by klei/gulp-inject#139
debug()
plugin.pipes.builtIndexDev = function() {
...
return pipes.validatedIndex()
.pipe(gulp.dest(paths.distDev)) // write first to get relative path for inject
.pipe(plugins.debug())
.pipe(plugins.inject(orderedVendorScripts, {relative: true, name: 'bower'}))
.pipe(plugins.inject(orderedAppScripts, {relative: true}))
.pipe(plugins.inject(appStyles, {relative: true}))
.pipe(gulp.dest(paths.distDev));
};
$ gulp clean-build-app-dev
[16:25:03] Using gulpfile ~/projects/healthy-gulp-angular/gulpfile.js
[16:25:03] Starting 'clean-dev'...
[16:25:03] Finished 'clean-dev' after 41 ms
[16:25:03] Starting 'clean-build-app-dev'...
[16:25:03] gulp-debug: dist.dev/index.html
[16:25:03] gulp-debug: 1 item
[16:25:04] gulp-inject 8 files into index.html.
[16:25:04] gulp-inject 2 files into index.html.
And nothing was injected!
I found a problem with appStyles
inject:
pipes.builtIndexDev = function() {
var orderedVendorScripts = pipes.builtVendorScriptsDev()
.pipe(pipes.orderedVendorScripts());
var orderedAppScripts = pipes.builtAppScriptsDev()
.pipe(pipes.orderedAppScripts());
var appStyles = pipes.builtStylesDev();
console.log('app vendors ==== ', orderedVendorScripts);
console.log('app scripts ==== ', orderedAppScripts);
console.log('app styles ==== ', appStyles);
return pipes.validatedIndex()
...
.pipe(plugins.inject(appStyles, {relative: true})) <--- this line causes empty inject
.pipe(gulp.dest(paths.distDev));
};
References:
https://www.npmjs.com/package/gulp-inject#injecting-all-files-for-development
I debug appStyles
and retun a DestroyableTransform
type. See below:
app vendors ==== Stream {
domain: null,
_events:
{ end: [Function],
drain: [Function: ondrain],
error: [Function: onerror],
close: [Function: cleanup] },
_eventsCount: 4,
_maxListeners: undefined,
writable: true,
readable: true,
paused: false,
autoDestroy: true,
write: [Function],
push: [Function],
queue: [Function],
end: [Function],
destroy: [Function],
pause: [Function],
resume: [Function] }
app scripts ==== Stream {
domain: null,
_events:
{ end: [Function],
drain: [Function: ondrain],
error: [Function: onerror],
close: [Function: cleanup] },
_eventsCount: 4,
_maxListeners: undefined,
writable: true,
readable: true,
paused: false,
autoDestroy: true,
write: [Function],
push: [Function],
queue: [Function],
end: [Function],
destroy: [Function],
pause: [Function],
resume: [Function] }
app styles ==== DestroyableTransform {
_readableState:
ReadableState {
highWaterMark: 16,
buffer: [],
length: 0,
pipes: null,
pipesCount: 0,
flowing: false,
ended: false,
endEmitted: false,
reading: true,
calledRead: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
objectMode: true,
defaultEncoding: 'utf8',
ranOut: false,
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null },
readable: true,
domain: null,
_events:
{ end: { [Function: bound onceWrapper] listener: [Function: onend] },
finish: { [Function: bound onceWrapper] listener: [Function] },
readable: [Function],
drain: [Function: ondrain],
error: [Function: onerror],
close: [Function: cleanup] },
_eventsCount: 6,
_maxListeners: undefined,
_writableState:
WritableState {
highWaterMark: 16,
objectMode: true,
needDrain: false,
ending: false,
ended: false,
finished: false,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
sync: true,
bufferProcessing: false,
onwrite: [Function],
writecb: null,
writelen: 0,
buffer: [],
errorEmitted: false },
writable: true,
allowHalfOpen: true,
_transformState:
TransformState {
afterTransform: [Function],
needTransform: true,
transforming: false,
writecb: null,
writechunk: null },
_destroyed: false,
_transform: [Function: saveFile],
pipe: [Function],
addListener: [Function: addListener],
on: [Function: addListener],
pause: [Function],
resume: [Function] }
[10:57:44] gulp-debug: dist.dev/index.html
[10:57:44] gulp-debug: 1 item
[10:57:44] gulp-inject 8 files into index.html.
[10:57:44] gulp-inject 2 files into index.html.
Would you help me please?
Your gulpfile.js
looks robust. That's why I made a test with angular-material here !!. This may suit to big projects wich may need alot of feature implementation in future by following this directory structure.
It would be nice if I could get all modules with their dependencies and their configs in one single file app.module.js
like this.
file app.modules.js :
(function() {
var app = angular.module('app', ['lots of dependencies']);
app.config();
var appBlue = angular.module('appBlue', ['more dependencies']);
}());
and be able to call any module in the file as many times as I want to create controllers, directives and services in separate files.
file sidebar.Directive. js:
(function() {
app.directive();
}());
file sidebar.Controller. js:
(function() {
app.controller();
}());
The problem is that I can't get app.module.js
to be injected before other scripts. How can I pass through this problem.
Hi.
Could you please make a setup without bower? I would like to use only npm.
Or could you please tell me what I need to change in gulpfile.js so that the packages are taken from node_modules instead of bower_components?
I'm pretty green when it comes to gulp.
Thank you
I have a problem to minify vendor scripts to production type.
I think that error is caused of angular-route
and animate-css
.
References to issues:
terinjokes/gulp-uglify#297
babel/babylon#546
I think that this code needs a filter to bower scripts / styles.
pipes.builtVendorScriptsProd = function () {
return gulp.src(bowerFiles())
.pipe(pipes.ordererVendorScripts())
// .pipe(plugins.minify())
.pipe(plugins.babel({compact: false, presets: ['es2015']}))
.pipe(plugins.concat('vendor.min.js'))
// .pipe(plugins.uglify({compress: true}).on('error', pipes.showErrors))
.pipe(gulp.dest(paths.distScriptsProd))
}
I comment the line with uglify
that also the same problem that.
See output in below:
internal/streams/legacy.js:59
throw er; // Unhandled stream error in pipe.
^
SyntaxError: /home/paneladm/projects/website/bower_components/animate.css/animate.css: Unexpected token (1:0)
> 1 | @charset "UTF-8";
| ^
2 |
3 | /*!
4 | * animate.css -http://daneden.me/animate
at Parser.pp$5.raise (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:4452:13)
at Parser.pp.unexpected (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$1.parseDecorator (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1939:10)
at Parser.pp$1.parseDecorators (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1924:26)
at Parser.pp$1.parseStatement (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1818:10)
at Parser.pp$1.parseBlockBody (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseTopLevel (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1778:8)
at Parser.parse (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:1673:17)
at parse (/home/paneladm/projects/website/node_modules/babylon/lib/index.js:7180:37)
at File.parse (/home/paneladm/projects/website/node_modules/babel-core/lib/transformation/file/index.js:517:15)
es.merge not guaranties the order of scripts processed here if scriptedPartials comes earlier then validatedAppScripts in app.min.js then partials wont loaded into $templateCache.
can you help me to setup bootstrap inspite of foundation
The bowerFiles() here call does not include any filter to discard anything it's not a script (the following uglify
throws error if the stream is not a pure js file)
Foundation just announced the version 6. Would be nice to get the latest version integrated http://foundation.zurb.com/sites-6-docs/installation.html
Note that version 6 already propose a template for Angular, but it is far less advanced than your and especially does not propose the dual Production/Debug mode.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.