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
Related
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 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.
i'm new to wordpress. I try to install the roots sage-master theme as a starter theme for my wordpress site in my localhost.
But after i install the theme, the css styles are not working that the site looks without any styles.
when i try to access the css file by taking the source code, it says, Object not found error message. What should i do ? Anyone please help me.
Thanks in advance...
Have you installed the necessary bower and npm dependencies and run the gulp build process? As stated in the docs. Specifically:
Install gulp and Bower
Building the theme requires node.js. We recommend you update to the
latest version of npm: npm install -g npm#latest.
From the command line:
Install gulp and Bower globally with npm install -g gulp bower
Navigate to the theme directory, then run npm install
Run bower install
You now have all the necessary dependencies to run the build
process.
Available gulp commands
gulp — Compile and optimize the files in your assets directory
I am a little confused about the use of Npm, Bower and Grunt. My objective is to install frontend packages (e.g.: bootstrap) for my front-end project and have Grunt set up to automate build tasks.
I have been using Npm in the past and I understand that it works with the package.json file, while Bower works uses the bower.json file. In this case, I installed Grunt with Bower (not Npm), however I realised that in order to run Grunt I still need to add the package.json file.
Should I have been using Bower to install Grunt at the first place ?
Does my project always need the package.json file to use Grunt? And
if so, are there any good practices for dealing with the duplication
between the bower.json and package.json files. (name, version of the app, etc…)
Thanks
grunt (grunt-cli) is command line task runner, not frontend library :), so installing it via bower is strange, but possible due to the fact that bower is using npm as base repository :)
package.json store all tool dependencies in your project - like bower or grunt
In frontend development bower should be handling css/js libraries in your app like jQuery, Angular.js, Bootstrap. NPM is for node.js extensions/utilities like grunt, karma devDependencies.
http://blog.nodejitsu.com/package-dependencies-done-right/
Im trying to start using gruntjs. But the official documentation is confusing me.
Should I write package.json file myself or any command would create it for me?
Uglify, concat, jshint all those plugins they used in the sample gruntfile, are they installed as grunt is installed?
When a plugin is installed, is it installed globally or I should install it everytime I create a new project?
You can write it yourself or create it with npm init or grunt-init.
No, you add the plugins you want to the package.json as devDependencies, then npm install to install them.
Plugins are project specific and are installed locally to your project.