How can I manage dependencies in a Sails.JS based project. There is a really neat feature which automatically links assets from the assets folder into the relevant templates, however, to get these files, e.g Angular, Bootstrap, Material-Design etc. I like to run bower / npm install. But then the resources are in the bower_compnents file and can't be linked to. How can I work around this to get file installed by package managers to be included in Sails.JS's default mechanism?
You have the option to change the location of the bower components with a .bower.rc file.
Example .bower.rc
{
"directory": "assets/components/"
}
It is not a good idea to automatically link components, there are many .js/.css files that must not included together (eg. lib_name.js and lib_name.min.js).
You have to include them manually like this (tasks/pipeline.js)
var jsFilesToInject = [
'components/lodash/lodash.js',
'components/moment/moment.js',
'components/moment/locale/el.js',
'components/angular-moment/angular-moment.js',
'components/re-tree/re-tree.min.js',
'components/ng-device-detector/ng-device-detector.js',
// Load sails.io before everything else
'js/dependencies/extend.js',
'js/dependencies/sails.io.js',
// Dependencies
//'js/dependencies/**/*.js',
'js/my-app-bootstrap.js',
// load my controllers
'js/angular/**/*.js',
'js/my-app.js',
];
Related
I'm using the Vue CLI to build my application into one of my existing php projects. In case to work with generated files in php, I need to move the assets to the ../public/assets/ directory. Unfortunately, this does not seem to work in development environment (production mode works just fine, but I'd really need to test the integration of vue in the php app).
Am I doing something wrong or is it a known restriction?
Here's the config:
// vue.config.js
module.exports = {
outputDir: '../public',
assetsDir: './assets',
indexPath: './views/index.html'
};
As per the documentation, you can just copy the assets into your public/assets folder and reference them via absolute path.
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Static assets can be handled in two different ways:
Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
Because of HMR in development mode this is not yet possible to implement. Here's the reference to the communication on Vue.js' forum.
I'm looking for the best way to arrange my code base with common resources shared between different projects. I have three aurelia apps. In each one, I added some resources in its resources folder (custom elements, attributes, etc). When I needed one already wrote in another project, I just pasted it. Now I have time to refacto, I'd like to move all this resources in a dedicated repository. Then I want to be able to pick only the resources I need in each project.
I've tried by putting all me resources in a repo with a gulp build task from aurelia skeleton which allow me to build AMD modules of all my modules. Then, I've been able to load some modules individually by adding them in aurelia.json. For exemple for an attribute:
{
"name": "aurelia-resources-progress-button",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/attributes",
"main": "progress-button"
}
or a custom element:
{
"name": "aurelia-resources-avatar-upload",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/elements/avatar-upload",
"main": "avatar-upload",
"resources": [
"avatar-upload.html",
"avatar-upload.css"
]
}
It worked like a charme but it failed for a value converter which import a module from relative path.
The file is located in :
"projectRoot/node_modules/SHG-aurelia-resources/dist/amd/resources/value-converters/duration-format.js",
it import from '../utils./strings'
and
I get the following error when I au run:
"Error: ENOENT: no such file or directory, open
'/Users/hadrien/Documents/dev/SportHeroes/united-heroes/src/resources/utils/strings.js'".
The strange thing is when I require a relative module from a template (like in my progress-button custom attribute) there is no problem.
I don't want to make a plugin because I don't want to load every modules of my repo. What I'd like, if it is possible, would be to be able to set .feature('../node_modules/path/resources') and load them like I load my local resources.
What should I do ?
I'm answering the question as reworded in the comments above.
If you have an npm package, you can simply require in resources from it using a require element. This npm package could package itself as a plugin, and you simply choose not to load it that way as you only want a subset up the stuff it provides.
I've created a set of sample projects that show this off: https://github.com/AshleyGrant/sample-app-so41961759
This application has a dependency on https://github.com/AshleyGrant/sample-resources-so41961759/
This dependency packages itself as a plugin, but it also can be consumed piecemeal as I am doing in the application by only using one of the two resources the plugin has. Note that the other resource isn't loaded since I'm not using it.
This is what it looks like in the app when I pull in a resource from within the dependency:
<template>
<require from="sample-resources-so41961759/custom-elements/my-echo"></require>
<h1>${message}</h1>
<my-echo say="Echo!"></my-echo>
</template>
I am trying to figure out how to integrate Semantic UI with my gulp-based frontend toolchain.
The npm artifact semantic-ui includes an interactive installer that will write a semantic.json file to the root of my project and install the less files, gulp tasks and some configuration into my project. All of these files will be put in subdirectories of a single base directory specified in semantic.json.
I do not want any dependency implementation files or any generated files in the git repository for my project because this will pollute revision history and lead to unneccessary merge conflicts. I would very much prefer to provide semantic.json only and .gitignore the semantic base directory. On npm install, the Semantic installer should install everything to the base directory specified in semantic.json. When building, I want the artifacts generated into a separate dist directory that does not reside under the semantic base directory.
However, if I do this, the installer will fail with a message stating that it cannot find the directories to update and drop me into the interactive installer instead. This is not what I want, because it means my build is no longer non-interactive (which will cause the CI build to fail).
How can I integrate Semantic UI into my build without having to commit Semantic and its generated artifacts into my git repository?
This is what we did in our similar scenario. The following are true:
Everything Semantic UI generates is in .gitignore. Therefore, the only Semantic UI files we have in our repo are:
semantic.json
semantic/src folder (this is where our theme modifications actually are)
semantic/tasks folder (probably doesn't need to be on git, but since it's needed for building, everything is simpler if we keep it in our repo)
We never need to (re)run the Semantic UI installer, everything is integrated in our own gulpfile.js.
Semantic UI outputs in our assets folder which is not in the same folder as its sources.
Semantic UI is updated automatically using npm as per the rules in my package.json.
Here are the steps needed to achieve this:
Install Semantic UI. By this I assume that you either used npm or cloned it from git (using npm is highly recommended), either way, you have semantic.json in your project's main folder and a semantic folder with gulpfile.js, src and tasks.
Make sure Semantic UI can be built. Navigate to semantic/ and run gulp build. This should create a dist folder in your semantic/ directory. Delete it and also delete Semantic UI's gulpfile.js since you'll no longer need it.
Edit semantic.json. You need to edit two lines:
Change "packaged": "dist/", to the path where you'd like to output semantic.css and semantic.js relative to Semantic UI's folder. In our case, it was "packaged": "../../assets/semantic/",
Change "themes": "dist/themes/" in the same way, since the themes/ folder contains fonts and images Semantic UI uses so it needs to be in the same folder as semantic.css. In our case, it was "themes": "../../assets/semantic/dist/themes/".
Edit your gulpfile.js so that it uses Semantic UI's build task. Add var semanticBuild = require('./semantic/tasks/build'); (if semantic/ is in the same folder as your gulpfile.js) and then simply register a task that depends on it, for example gulp.task('semantic', semanticBuild);.
Optionally, create a clean task. We used del for that.
gulp.task('clean:semantic', function(cb) {
del(['assets/semantic'], cb);
});
Is there a way for gulp-less (or some other tool) to take the paths to images that are referenced in the .less/.css file and put the files to the destination folder?
Right now when I install a node module, I #import the css file from /node_modules/... directory to my main .less file and it will be included in the bundle, but the images that come with the module are still located under /node_modules/... folder which I don't plan to deploy so using a relative URL would be pointless.
You should consider using bower to split your dev dependencies (handled by npm, non-deployed stuff) and front-end libs (handled by bower, deployed stuff).
Using a .bowerrc like this, you can tell where to save the libs in you projects structure:
{
"directory": "./<your-public-folder>/libs"
}
Could someone explain the right approach in managing assets in Laravel 5?
For example, let's imagine I want to install some plugins using bower. The recommended way, as I got it, to keep all files into /vendor/bower_components. So I got some css, some images, fonts and javascript files withing the plugins.
Also I have a "app.less", where I import everything I need, like #import ('../../../vendor/bower_components/someplugin/somestyle.css'). The problem though that I don't have images/js/fonts in my public directory. Okay, I saw that you can use gulp copy function. However, when the number of plugins is getting higher, how I am supposed to manage where each plugin keeps its pictures or other files?
Actually I wanted to try semantic ui. I've downloaded it with bower. I know nothing about semantic ui, but there is a dist folder with semantic-ui.css. Also there are some fonts files withing themes/basic/assets/fonts. If I just copy it to public, it'll be public/themes/basic/assets/fonts. Then I import semantic-ui.css into my app.les and it'll find necessary fonts. What if I have some other plugins, it'll become unbearable to manage it all.
What is the typical workflow for this problem? The most simple way is just something like put everything into public and include it manually using <link> and <script> tags, but it'll require a lot of queries.
And why it's bad to keep all bower_components inside public? On the analogy of composer, we don't have autoloader for bower, so there is a mess of assets.
You are correct in the recommended place to put bower_components. It's not recommended to put bower_components in the public directory because it contains ALL the files in that specific package, not just the file you need to include in your HTML.
Since your talking about Laravel5, it is recommended to utilize laravel-elixir to manage assets. http://laravel.com/docs/5.0/elixir which utilizes gulp and can compile less, sass or various other files. I don't have any experience with semantic ui, but it looks to be similar to bootstrap. Without a SaaS or Less version available on npmjs.org you would need to copy the necessary files to your public directory. Elixir provides a simple way to copy files or whole directories from bower_components to your public directory.
The easiest way to include all the files needed without a ton of or is to use saas or less.
Personally what I do is this using node
var elixir = require('laravel-elixir');
var nodeDir = './node_modules/'; //This is the node directory(base directory) where all vendor files are downloaded in your case might be different
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix the styles and copy fonts to my public/css folder
mix.styles([
'bootstrap/dist/css/bootstrap.css',
'font-awesome/css/font-awesome.css'
], './public/css/app.css', nodeDir)
.copy(nodeDir + 'font-awesome/fonts', 'public/fonts')
.copy(nodeDir + 'bootstrap/fonts', 'public/fonts');
//mix javascript from node directory and output to public/js/ folder
mix.scripts([
'jquery/dist/jquery.js',
'bootstrap/dist/js/bootstrap.js'
], './public/js/app.js', nodeDir);
});