Is it possible to use Bourbon and it's additional components without needing to have Ruby installed? We'd like to experiment on a small project, but it's a pain to get dependencies approved by the desktop engineering folks.
I've noticed that there are Bower packages for all but Bitters. Can I just grab the scss files from GitHub and wire things up manually?
Seems the devs don't want to have bitters on bower: https://github.com/thoughtbot/bitters/issues/22.
That said, you can get bitters with bower if you use a zipball from git as a version (e.g. https://github.com/thoughtbot/bitters/archive/master.zip).
If you want more control on how to bring those files in your project, gulp-bower-normalize can help — an example bower.json file:
{
"name": "project-x",
"dependencies": {
"bitters": "https://github.com/thoughtbot/bitters/archive/master.zip",
},
"overrides": {
"bitters": {
"main": [
"app/assets/stylesheets/*.scss"
],
"normalize": {
"css/base": "**/*.scss"
}
}
}
}
Had this same question recently as I'm using Bourbon/Neat in a static site project. I've found that the 'bourbon' and 'neat' commands do nothing more that replicate the hierarchy of library files into your project directory. At that point you can use the libraries with any workflow which is able to preprocess sass/scss files.
In my case I'm using them successfully with the Python WebAssets library from within Pelican, you might be able to find another sass preprocessor that fits into your setup.
If you can get node installed on your dev machine check out Yeoman. It uses Grunt and Bower to generate a web app that uses Sass. Then you can install Bourbon and Neat using Bower. It does a lot of the heavy lifting for you.
Related
I'm using Composer as a dependency manager for a WordPress project. I'm specifying plugins and WP-CLI as dependencies in composer.json like so:
"require": {
"johnpbloch/wordpress": "5.8.*",
"wp-cli/wp-cli-bundle": "*",
"wpackagist-plugin/akismet": "*"
}
Here's the documentation on installing WP CLI via Composer. This works great. However, I would also like to include the latest version of SASS this way, so that new people on the project can get that installed via Composer without having to do it manually.
I cannot count on everyone having npm, Chocolatey, or Homebrew, and I won't know what operating system they use.
Alternately, how could I install the latest version of SASS cross-OS via a script that Composer runs using post-install-cmd?
If there is no package for Sass (and it makes sense there wouldn't be, unless sass could be installed as a stand-alone binary or something like that), you cannot install Sass as a composer dependency
Which in any case wouldn't make much sense, since Sass cannot be a dependency for a PHP project, as it has nothing to do with PHP.
Alternately, how could I install the latest version of SASS cross-OS via a script that Composer runs using post-install-cmd?
The install instructions for Sass include no provisions for a "cross OS installer without using npm". So unles you write a script checking for the OS, what does it have installed, etc (which would be brittle and some serious overkill), you cannot automate this with a post-install-cmd.
Which again, wouldn't make a lot of sense in any case. If the package consumers need to use sass part of the project, it's a given they are developers and are capable of going through the sass requirements.
Point your package consumers to the appropriate documentation and be done.
I have an existing ASP.net application in Visual Studio. Until recently I only used JavaScript. Now I want use Typescript. Installing and transpiling works great. However, I got stuck when I wanted to import modules.
My idea was to use npm for loading modules, e.g. I added to package.json:
"devDependencies": {
"typestyle": "^1.7.1",
}
which I want to import in my .ts file via:
import { style } from 'typestyle';
The problem: npm downloads to folder node_modules which does not belong to my project (but it is inside my project folder); the import statement does not find the required files.
Currently I am using requirejs to enable import statements as explained here. My tsconfig.json looks like this:
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"sourceMap": true,
"target": "es5",
"module": "amd",
"moduleResolution": "node"
}
}
I can download typestyle.js manually, put it in my project folder, and configure the requirejs configuration file main.js so that it finds it. But then I am not using npm.
How can I import modules that I loaded with npm? I'd like to use requirejs. I do not want Angular or React. If possible I also want to avoid other things which make my project unnecessarily complicated (Mocha, node.js, knockout, Webpack, Gulp, Browserify, ...)
EDIT
Okay, after reading NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack I guess I do need a module bundler like Webpack or Browserify. But maybe there is some tool integrated in VS2017 which I could use?
EDIT2
And after reading How it feels to learn JavaScript in 2016 (note: this is 2018) I understand that it might be too much to ask for a simple solution...
Finally I found a solution which suits my needs. Since it is very lengthy I'll just post the link (project source code)
http://codingsight.com/using-npm-webpack-and-typescript-to-create-simple-aspnet-core-web-app/
Only drawback so far: It uses Webpack instead of requirejs. Webpack is a module packer. All .js files/modules are combined into one huge .js. No lazy loading by default.
I am starting a new Laravel project with v5.2 and I would like to use Zurb Foundation v6.2.
I've seen that Zurb Foundation can be installed through composer and since I've installed Laravel through composer, I thought it as a good idea.
I did it, Foundation is in the vendor (vendor/zurb/foundation) folder.
It has also been added to the composer.json:
"require": {
"php": ">=5.5.9",
"laravel/framework": "5.2.*",
"zurb/foundation": "^6.1"
},
But now, how can I use it? Where should I create my css file(s)? In the resources/assets/sass folder where Laravel already provides a scss file (app.scss)? If so, how can I link it to Zurb Foundation?
Thanks a lot for your help.
I think Laravel Elixir is more suitable for this purpose.
From the guide:
Installing Node
Before triggering Elixir, you must first ensure that Node.js is installed on your machine.
node -v
By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page. Don't worry, it's quick and easy!
Gulp
Next, you'll want to pull in Gulp as a global NPM package like so:
npm install --global gulp
Laravel Elixir
The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
npm install
Then to install Foundation 6 for Sites it's recommended to use Bower, (another) package manager, but specifically for managing frontend facing libraries like Foundation and jQuery.
You can have a look at Zurb's example template for better understanding.
npm install --global bower
Create a file named bower.json:
{
"name": "my-site",
"dependencies": {
"foundation-sites": "~6.1.2",
"motion-ui": "~1.1.0",
"foundation-sites": "~6.2.0",
"motion-ui": "~1.2.2"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"private": true
}
Then run bower install.
In app.scss, import Foundation:
#import 'foundation';
#include foundation-everything;
Then in gulpfile.js, compile it to CSS:
mix.sass('app.scss', 'public/css/app.css', {
includePaths: [
'bower_components/foundation-sites/scss/'
]
});
Finally to compile, run:
gulp
I think npm way is better suited for front-end stuffs. Take a look at this:
http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html
If you are using earlier version, its just using gulp instead of laravel-mix.
I have a PHP project, that uses composer for it's PHP dependencies and bower for it's front end dependencies. So basically I have a directory structure that looks something like this (a simplified version obviously):
/app
/bower_components
/public
/vendor
/foo
/bar
/src
bower.json
composer.json
bower.json
composer.json
gulpfile.js
As you can see, the php dependency has some front end dependencies of it's own, that are also managed with bower. However, when I run bower install from the root of my app, the bower file from inside my foo/bar dependency is ignored.
I do not want to build my front-end dependencies inside foo/bar in advance and just include those in my app using gulp, because foo/bar may have overlapping dependencies with my app (like jQuery or Bootstrap or something) and I obviously do not want to include those twice. And I also would prefer bower throwing an error when there are version conflicts for overlapping dependencies, rather then having to find out the hard way.
Ideally all my front end dependencies would end up in my root bower_components directory, both those from my app's bower.json, as well as those from vendor/foo/bar/bower.json. This way I can have gulp compile all those into a single (or probably a few) .js and .css file.
So the question is, is that possible? Can I have bower look at other bower.json files inside sub directories? Or is there a recommended way to automatically merge multiple bower.json files before bower is ran?
I have spent the last hour scouring the web for a good solution to this problem, but I can't seem to come up with anything. (If you know of a good blog post or resource on this topic, please do share!) All google gives me are some basic bower tutorials, that are not very helpful here. Am I really the first one to run into this problem, or is there something fundamentally wrong in the way I am trying to tackle the issue at hand?
One way to tackle this (and a way Symfony CMF uses now) is to create bower packages for your PHP dependencies. This means you create a front-end bower package from your bundle, the package only contains the bower.json file with the dependencies.
Now, in your application's bower.json file, you can specify these "virtual" bower packages as requirements and run bower install. For instance:
{
"dependencies": {
"php-foobar": "^1.3"
}
}
The composer plugins composer-extra-assets and composer-assets-plugin allow adding bower dependencies to composer.json.
composer-assets-plugin is implemented in pure php and turns bower packages into composer packages.
composer-extra-assets calls the "real" bower behind the scenes. It is installed (including the required nodejs) automatically though if you don't have it on your system.
Disclaimer: I'm the author of composer-extra-assets.
I'm using three.js and there are a number of useful files under the examples/ directory that I wish to include in my project. Unfortunately, examples/ is listed under the ignore property of the three.js bower.json config file.
Is there a straightforward way to install specific files under examples/ with Bower?
Whole idea that is behind bower is to focus only on main library files.
From my point of view you have options:
use derivative package via npm instead of bower and in your code reference from node_modules directory - for example https://www.npmjs.com/package/three.js
create your own npm package based on npm/bower and use it the same way
There are a few options for your specific case.
Perhaps the easiest for your scenario is to install threejs-examples using bower to get the examples directory. This is best used in combination with threejs-build to ensure consistent versions of threejs.
bower install threejs-build threejs-examples
Alternatively you could install the whole git repository and copy out what you need (may take some time)
bower install mrdoob/three.js
Or you could use a grunt task like grunt-bower which can install only the packages you require by using the packageSpecific and files options.
The following grunt snippet will copy only orbit controls from the examples directory
bower: {
dev: {
dest: 'components/',
options: {
packageSpecific: {
'threejs': {
files: [
'examples/js/controls/OrbitControls.js'
]
}
}
}
}
},