Hi I was wondering if we could use npm packages in the Symfony replacements... And if it's possible you can tell me how please
You can create all of frontend things in your public folder (for explain (/public/frontend/), init the npm, Webpack (if you want), and require generated CSS and JS files, in your base.html.twig template.
As you can see on the documentation Symfony documentation.
You can use npm or yarn which is similar but a still little bit different When to use Yarn over NPM? What are the differences?
Related
When I run this command...
npm install vue-material
It seemed to install and override some css in my application causing css conflicts. I had to search and find the exact piece of css and override it directly on the specific vue component's section.
Is there anyway to prevent this from happening when installnig NPM packages?
Technologies uses:
vue.js
webpack
material-vue
I believe I found out what I was looking for thank you #ljubadr for your help.
In the recommended Getting Started vue material guide it states you can:
import 'vue-material/dist/vue-material.min.css'
However, if you only need one component, this should work for a specific CSS need on a specific vue component:
import 'vue-material/dist/Components/MdCard/index.css'
Our team is starting to use LESS to write CSS. I am using atom.io and there is a plugin to auto-compile LESS to CSS on save. (Link to plugin) However, some team member prefer to use sublime. While there are also similar plugin for sublime, it requires npm for installation. Our team mainly use PHP with composer for package management, so installing npm just for a plugin seems a bit overkill. Is there any other way to do LESS auto-compile on save with sublime?
Not that I know... :(
There is a python library that compiles less to css. (sublime plugin are written in python) though
So, all you've got to do is: write this plugin using lesspy
If you are a bit patient, I am trying to make this plugin, it shouldn't be to hard, I'll keep you in touch.
Matt
EDIT: Here's the plugin: st-py-less. Follow the (simple) instructions to install it. Only working with Sublime Text 3.
They could probably use SublimeOnSaveBuild
But npm and Composer aren't really comparable here. Composer manages a project's dependencies, npm provides easy access to hundreds of thousands of community-maintained packages. Using Composer isn't a reason to not install npm.
And the package you install when you "install npm" is under 14MB. It also comes included with Node.js. The "Installation Requirements" for sublime-less2css, by listing "install node" and "install npm" as two separate steps are misleading, and the provided links aren't that helpful. Here's the official documentation for Installing Node.js and updating npm
This is getting beyond the scope of your question, but to have a single team-wide editor-agnostic setup for automatically compiling LESS to CSS you could use Gulp. If you aren't familiar with Gulp, follow CSS-Tricks' Gulp for Beginners from the start up through the "Watching Sass files for changes" step. (Note that the guide teaches you how to use gulp-sass to compile Sass to CSS; in your case you'd just use gulp-less instead.)
I'm hardly trying to get my existing ng2-prototype running in a meteor1.3 setup. So far i was building the prototype with webpack, and there is a provide plugin to make things like jQuery or Tether available during module building:
plugins: [
new ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.Tether": "tether"
})
]
As you can see, i did the same with "tether", since it's still the lib needed by bootstrap 4 alpha.
Now i'm wondering how i could achieve the same in my meteor1.3 project..? As written in the changelogs of the package "angular2-meteor", it is using webpack under the hood now to build everything.
angular2-meteor changelog
So, it should be possible to use the same provide plugin again in meteor1.3, right? But... how?
From the github issue threads of "angular2-meteor":
there are multiple ways: you could install https://atmospherejs.com/coursierprive/tether, or,
since Meteor 1.3 prefers NPM now, you could install Tether NPM and require it before you use bootstrap 4, or, if you want more control and modularity, you could create own local package (in the packages folder) with all dependencies (added from NPMs) you need including Tether (similar to the way angular2-runtime done in this repo).
i will try this out and i'm already sure this will do the trick :) many thx #barbatus ;)
Update:
Ok i'm going with the npm package solution, i had tether installed already. If you don't have it, do this first:
npm install --save tether
Now, the single require statement won't be enough.. bootstrap 4 which i'm trying to include completely is asking for a window.Tether function. So i ended up doing this:
let Tether = require('tether');
window.Tether = Tether;
// import all bootstrap javascript plugins
require('bootstrap');
Cool is, there is also a typings definition file for it now, just add it by running:
typings install --save --ambient tether
After adding it to the window global context, the errors are gone... but ok, the solution trough the webpack provide plugin feels still cleaner -> it will provide the Tether object for each module separately during build, so it won't end up living in the window global context after all. But i'm just lucky to have it running now :)
PS: jQuery is provided anyways by meteor, that's the reason it is already enough to get it running by just including tether alone.
Update: yeah jQuery is included by default - but it is just a package in your /.meteor/packages file ;)
I've finally started developing locally and have installed Roots.io for WP builds. Bower, gulp, node, it's all great. I've used Bower to install wow.js and it's there, but the dependency is animate.css. Is there a way to install animate.css via Bower/Homebrew/etc?
On the animate.css Github I don't see a simple way to include it in the Roots build. I've tried to manually include in which hasn't worked either, hence looking for the ideal/clean solution to the problem.
Thank you!
When installing dependancies via bower (or any package manager really) that project should include a manifest (bower.json) that lists it's own dependancies. E.g. The bower.json in wow.js should include a reference to animate.css. However if it does not you can include it as any other dependancy:
bower install animate-css --save
Then run you build process again. In this case:
gulp
I would like to use gulp in my Wordpress project. Is it possible to execute gulp functions outside a node JS project?
I'm running on OSx, but couldn't find anything on the internet about it. Or do I'll have to use another lib like Grunt?
Yes, the main language of your project doesn't affect whether or not your can include some node.js dependencies and run them. You will need to have gulp installed and have a gulpfile.js in your project, and then you can run it.
You could install gulp globally on the server (npm install -g gulp), but I recommend creating a package.json file (using npm init) in your project, so that your node.js dependencies are tracked in your version control, and installing gulp with npm install --save gulp (inside your project's directory). Since gulp won't be installed globally in that case, you will need to use "$(npm bin)"/gulp from a directory inside your project to run it.
I use Yeti Launch from the Zurb foundation for the same setup (no node installed on my Mac).
When you run it, it will create a Foundation frame but you can do the following:
Stop the project it creates from within its interface,
Delete the files it creates and replace with yours
Leave the project it shows in the interface
Leave the "node_modules" folder it creates
Start the project again
This will run your Gulp file.
The only issue is installing node modules. For this, I look at any error messages it gives regarding missing modules and copy these into the "node_modules" folder from Github
The short answer is no. Gulp is distributed as a npm package and has node.js as a dependency BUT that doesn't mean you can't use it outside of a node.js project.
The only real need for Gulp on a wordpress project would likely either be at the theming layer or if you were doing a custom plugin. Assuming you are making a theme, some of them use Gulp extensively.
I've used the Roots ecosystem's Sage theme successfully on a number of projects. It has node/npm dependencies but they are all included if you use the theme. Check out their Gulp file - it's probably close to what you are philosophically looking for.