I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
Related
Goal
Compile many .sass files to one .css file, where all .sass and .css files are in the same directory.
Problem summary
I'm trying to compile many .sass files to one .css file, all located within the same directory, like this:
- app
- static
- css
- _base.sass
- _header.sass
- _layout.sass
- _map.sass
- _modal.sass
- _windows.sass
- main.v0.css
- main.v0.css.map
- main.v0.sass
I'm using the VSCode extension Live Sass Compiler, which has worked seamlessly in the past for what I'm doing but all of a sudden it's breaking my source mappings. I also can't remember/figure out how to do a many to one Sass compilation at the command line, with the specific constraint of keeping both the .sass and .css files in the same directory.
At this stage, every time I use Live Sass Compiler to compile, my git history shows these changes (see screenshots), which seem to be breaking the site. When I load my page after making changes in this way, all the styling for my site stops working.
Findings
From what I can deduce, it's wiping all the previously compiled styling from main.v0.css and replacing it with mapping information. In main.v0.css.map it seems to be stripping sourceRoot information, changing sources from main.v0.css to main.v0.sass, and changing file from main.v0.css to main.v0.sass (so just switching those two for some reason).
Can anyone help me? Maybe this broke with the last VSCode update or something?
I'm working on the documentation (https://global-coffee-data-standard.readthedocs.io) of my JSON schema (https://raw.githubusercontent.com/andrejellema/GlobalCoffeeDataStandard/master/schema/global-coffee-data-standard.schema.json)
The basics I have working (thanks to a lot of help from this forum) but now I would like to include the docson widget to show my code more beautiful (https://global-coffee-data-standard.readthedocs.io/en/latest/explanation.html#id13)
I've read this page https://threesixtygiving-standard.readthedocs.io/en/latest/_static/docson/README/ and I'm wondering how to install docson locally but more important on ReadTheDocs.
Do I need to run npm i docson localy? If so which files do I commit to my _static folder so ReadTheDocs can work with it as well?
Or can I put some magic in conf.py to let Sphinx handle it?
EDIT
I tried adding the docson files to my _static folder and it seems to work when I add this code to my ReST file:
<script src="_static/docson/js/widget.js" data-schema="https://raw.githubusercontent.com/andrejellema/GlobalCoffeeDataStandard/master/schema/global-unique-id.json"></script>
But only when I add just one docson widget. When I add more I get this error in the console:
only one instance of babel-polyfill is allowed.
So I'm assuming this is not the correct workflow.
What is the correct workflow to add multiple docson widgets to my page.
our Team, work with laravel and we want to start a large scale project.
The front-end project will be written with Html Css Bootstrap jquery Sass
and we task runner is Gulp
How will our project directory be?
sass directories and my file and images Where do they go?
You can use Laravel Mix to compile CSS and JavaScript pre-processors. So you will store all your assets into resources/assets folder.
Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.
To use laravel mix you have to first install node and npm.
Then create files app.js and app.scss in resources/app/sass directory and resources/sass respectively.
Then open webpack.mix.js file which will be on your project root write the following code in webpack.mix.js file
In webpack.mix.js file (you can see this file at your project root directory)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Now let's see what is the meaning of above two lines?
mix.js('resources/assets/js/app.js', 'public/js') says to read app.js contents (which is stored in resources/js directory), pull them and put them up in public/js after mixing them up.
Same is for mix.sass. Since it is using SAAS compatible so you may use CSS or SAAS based syntax to define your layouts. Webpack compiled them to a single CSS anyway. Now in master.blade.php, all you have to make these two calls for JS and CSS resources respectively:
<script src="{!! asset('js/app.js') !!}"></script>
and
<link rel="stylesheet" href="{!! asset('css/app.css') !!}">
Now run npm run dev command.
It will compile your CSS and JS files and put the build inside a public folder.
For detail explanation you can check
https://laravel.com/docs/5.7/mix
https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/
It varies from projects and frameworks. Put the stuff where you find that it makes the most sense. If you're running a standalone frontend app that uses Laravel as backend API you'll probably do well organising your app with it's own tree.
But considering you're using html, css, jquery and sass, which are standard web techniques, this is what Laravel is basically built for. So use blade-templates for the html and put all your jquery and css in the public folder. If you haven't used Laravel before you should probably plow through a series of tutorials to get the idea of its MVC structure.
It seems that you have to manually checkout a bunch of repos, and when I tried to run the core-tests runner.html, they reference htmls from outside the folder which is restricted by the browser
Polymer uses a notion of components. We define a component as a set of shareable resources in a folder. All of your components should be together in one master folder (I usually call it components). This way one component can reference another component by looking in ../<component-name>/.
A project will generally look something like this:
my-project/
index.html
components/ <-- could be symlink or a server redirection
platform/ <-- polyfills
polymer/ <-- polymer
core-ajax/ <-- a custom element
...
core-tests in particular, is itself a component. It lives in the components folder and runs tests on other components (by looking at ../<component-name>/ as above).
So, if your web-root in the example above is my-project, you should be able to access my-project/components/core-tests/runner.html to run those component tests.
There are multiple ways to populate the components folder. The easiest way is to use Bower (http://bower.io) with a command like bower install Polymer/core-elements.
You can also use Git checkouts, or ZIP archives. There is a nifty utility for downloading Bower packages as zip files at bowerarchiver.appspot.com. E.g.:
http://bowerarchiver.appspot.com/archive?core-elements=Polymer/core-elements
Will get you a zip of the core-elements Polymer component, with all of it's dependencies.
There are two Yeoman generators that can help you with starting off: yo polymer and yo element
yo polymer is based on the polymer seed-element and yo element is based on the polymer-boilerplate.
I ended up writing a blog post on getting the hang of these different setups. If you get the latest version of the generator from the github repo it will scaffold an app for you:
npm install -g git+https://github.com/yeoman/generator-polymer.git
Also make sure to have a look at the vulcanize task to concat your components.
Sorry for the noob question but I'm trying to start up a new application with Sails and include my assets. I'm using Bower to manage my packages for things like Bootstrap and JQuery. I had a read of this question and added a .bowerrc file which is now installing my Bower components to /assets.
I'm now confused as to how I should proceed to add these files into my project. It seems as though I can't just do a <script> tag in the header as I'm used to because it's giving me a file not found. Reading through the sails documentation it seems like Grunt should be creating a .tmp/public/assets folder in my project, but whenever I run sails lift and go to .tmp/ there is nothing in there.
I also read in the documentation that I should be using some kind of asset injection, I tried adding this to my HTML and it seems like it doesn't do anything.
My other question is around how I go about referencing images in my HTML. Obviously I can't just do something like src='assets/images/image.png, how should I go about this? Is there something really obvious that I'm missing?
Sails use grunt tasks to do lot of things during lift and build. You can get much better look how everything work if you take some time and check what is inside Gruntfile.js from root of your sails project.
About your specific question here is some information:
- from sails docs: "In order to take advantage of asset injection, minification, and concatenation you must put your assets in folder under assets/linker". This exactly mean that everything what you will put inside assets/linker directory will be affected by grunt tasks during lift. It mean that all files/directories from linker will be copy to .tmp/public and also some of that files will be processed before saved to .tmp/public.
- About adding tags. If you take a look at Gruntfile.js you will find this variables: var cssFilesToInject = [...] and var jsFilesToInject = [...] which contain files that will be automatic added to layout header during sails lift.
- About your 'other question', yes you can do something like 'src='linker/images/image.png' if you move that files to linker directory (assets/linker).
I hope this help :).