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 :).
Related
If I move ComponentFoo.js from folder X to folder Y, than a bunch of import statements break. Looking into this it seems there are many solutions for typescript, but what about js / es6? If I move a file in the editor, it should find all the import statements and update them to the new location. Is this possible?
Old post, but this might help some Googlers. This feature can be enabled and disabled in User Settings. For Javascript and Typescript, it's called "Updated Imports On File Move".
I had apparently disabled it and just figured the feature was broken :X
VS Code has built-in support for this for both javascript and typescript since VS Code 1.24.
For JavaScript specifically, you need to make sure VS code's language support can find all the references to the file so that imports referring symbols in that can be updated properly. Definitely create a jsconfig.json for your project, and also consider enabling semantic checking for JavaScript so that VS Code shows when imports are not being properly resolved
If your project is configured properly but files are not being updated, make sure you are running the latest VS Code insiders build and report an issue if it still doesn't work
for flutter developers you should move files one by one. vscode doesn't support multi file moving with refactor yet.
Just use IntelliJ. It handles all kinds of refactoring perfectly. I'm a huge fan of VS Code, but refacotoring is definetly not one of it's stengths. Some imports don't get detected, and the imports can get modified in a weird way. For example, I had an import like this:
import { myStore} from 'src/common/stores/myStore';
When moving the file of myStore.ts to a different folder, VS Code constructed this bull**it:
import { myStore} from 'src/common/composables/myStoreStore';
The line above is no typo!
Btw I'm using vetur, maybe thats causing it, I don't know ...
I am new to gulp and i am getting object expected gulp error, but found solutions as rename file to gulfile.js
1) Need to understand every project has only one gulp file thats gulpfile.js? If i need to define more than one then how to and what will be the file name.
2)My requirement is to concatenate more than one less(convert to css) & js file into one and then apply it to index.html
3) I am using express to create gulp project structure. is this standard way? if no then how do i?
4) everytime i create gulp skeleton, do i need to install all packages again for every project?
Any references from where can learn gulp from basic.
I think one of the reasons you're getting downvoted is that on SO each question should be one question. This should really be four separate questions. Another reason is you haven't provided any of your code - add code (the { } icon) and include your gulpfile.js and your package.json.
1a) Yes, it has to be called gulpfile.js
1b) If you search SO and google for "multiple gulpfiles" you'll get a lot of solutions. If none of them work for you, let us know what you tried and what went wrong. But just so you know, it's better to start with just one gulpfile - it can be hard to get multiple gulpfiles working correctly, and using just one will help you learn gulp.
2) you'll need to use gulp-less and gulp-concat to turn multiple LESS files into one CSS file, and gulp-concat again to turn multiple js files into one.
3) You can use express, but you don't have to do. It depends what you're doing, and we have no idea what you're doing.
4) Not sure what you mean by "gulp skeleton". If you mean "Do I need to run npm install for every new project, yes you do.
5) Google "learn gulp"
6) If an image could just be text, it's better to just include the text.
If you need to, open new specific questions. For more on writing a great SO question, see https://stackoverflow.com/help/how-to-ask
I am in the process of rebuilding a API documentation site for an open source project where we want to keep an archive of previous releases. I am wondering how I can configure Jekyll to generate the right hierarchy?
We have the following directory layout in our current /docs folder (which we would like to reuse in Jekyll somehow):
current/
v1/
v2/
v3/
Whenever we release a new version the current folder gets copied to a new folder (say v4). The contents of each folder is something like this:
introduction.md
testing.md
api-foo.md
api-bar.md
I'd like these to be available under the url domain.com/v3/testing/, domain.com/current/testing/, etc. I see that I could probably employ collections to do this, having one collection per version. To do this I see myself auto-updating the _config.yml as part of a build script (I made an example doing this here), but I am not sure how to progress from here, or if using collections for this is the wrong approach ...
This is too brief of an update to be of real quality, but thought I would mention that we solved this in the end in the Sinon project. Check out the repo at GitHub sinonjs/sinon and see the docs folder as well as the scripts called from package.json.
Feel free to improve on this answer by editing it and adding content and links.
Choices:
create an asset bundle (nicely explained by Ivo Renkema at How do I manage assets in Yii2?). this is what I need if I want to package my code for other use. alas, should I also do this for my own php include library functions? Or should I still stick them into the same php location as my other php files? In any case, if I want to go this route, presumably I would then customize the AppAsset class, included in the template, as explained in http://www.yiiframework.com/doc-2.0/guide-structure-assets.html .
stick my files directly into $basePath/web, where $basePath is typically something like /var/www/myapp/ (i.e., as $basePath/html/mine.html [and refer to it simply as href='/html/mine.html'], $basePath/css/mine.css , $basePath/js/mine.js, and $basePath/php/mine.php [and refer to it as $basePath= \Yii::getAlias('#webroot'); require_once('$basepath/php/mine.php') ])?
stick my local files where my php view code sits. the advantage is that the files are close to where I will use them. the disadvantage is that I may litter the view directories not only with php files, but also with my non-asset assets, even though they will be used only by these (my) php files.
it's a beginner's question for the google cache reference. it's about best practice when getting started. I can guess the answer, but we wouldn't want a novice to disseminate bad info.
If you need your CSS and JS files only in one view or one Controller you have 2 choices:
1- Create a asset bundle Here other guide if you need it.
2- Use registerJsFile() from View Class
You can acces from controller using:
Yii::$app->view->registerJsFile('js.path');
(Same with CSS files but using registerCssFile())
With the PHPfiles I always try to convert the code to yii's MVC. If you have a entire library try to add it as a component. Here a usefull guide
I have following case: I want to use uncompressed js/css files during development (to debug js for example) but on production I want to switch automatically to minified versions of that files.
some simple solution is to put in your template:
<script src="some_js.{% if not debug %}min.{% endif %}js"....
but this require manully providing that such file exist and to do minifaction manullay after original file change.
How do you accomplish this in your projects? Is there any tool for this?
Did you try django-compress ?
See http://djangopackages.com/grids/g/asset-managers/ for a fairly complete list of available asset managers for Django...
If you already are using django-compress, you should have a look at upgrading to django-pipeline, which is a well maintained fork, with a lot of new features. I encourage everyone to who is using django-compress to switch to django-pipeline instead: * django-pipeline documentation
Django-compress is no longer being maintained. Try https://github.com/cyberdelia/django-pipeline instead.
I've been using webassets and so far I'm very satisfied. What I really like about it, is that you're still able to define your CSS and JS files inside of your templates, instead of in the project configuration.
Documentation can be found at: http://elsdoerfer.name/docs/webassets/
As of the end of 2016, these answers are mostly outdated.
Check here for a few options:
https://gitlab.com/rosarior/awesome-django#asset-management
At the moment, django-compressor is a good choice, but there are alternatives depending on what you want to do. I believe webpack is becoming popular these days as well.
I wrote this Makefile to minify and concatenate my JS and CSS files. It depends on the YUI Compressor JAR.
After updating a file, you still have to run make though. Nevertheless, you can make it run when the server starts and/or reloads, or setup a commit-hook on your SCM.
Of course you still need the {% if not debug %}, but it's a small price to pay IMO.
Showing the simple usage:
$ make
[css] static/css/first.css
[css] static/css/second.css
[css] static/css/third.css
[css] static/css/and_so_on.css
[tag] #import url("static/css/all.css");
[js] static/js/first.js
[js] static/js/second.js
[js] static/js/third.js
[js] static/js/and_so_on.js
[tag] <script type="text/javascript" src="static/js/all.js"></script>
Done.
Just released an open-source project that watches directories for changes and auto-minifies JS, auto-compiles SASS/SCSS, runs command line operations, etc.
Check it out at http://devWatchr.com/
It runs using python and pyinotify on your system during development.