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
Related
I am trying to install sage starter theme
composer create-project roots/sage your-theme-name 8.5.1
The theme is cloned but "dist" folder is missing. I installed bower and gulp. But still dist folder is missing from the file structure.
I get the following error while running gulp command.
events.js:163
throw er; // Unhandled 'error' event
Can somebody please point me to the right direction. Thanks.
composer create-project roots/sage your-theme-name 8.5.1
npm install -g gulp bower
Navigate to the theme directory, then run npm install
bower install
now the bower_components directory is created
I had a permission error. Before running gulp change the permission.
sudo chmod 777 bower_components
sudo gulp
After completing this a dist folder is created and you are good to go.
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
The install page on the Grunt website gives the following suggestion
Grunt and Grunt plugins should be defined as devDependencies in your
project's package.json. This will allow you to install all of your
project's dependencies with a single command: npm install.
I want to use grunt to run some tasks that are specific to local development, e.g.
development: concatenate javascript, but dont minify
production: concatenate and minify javascript
If I install Grunt as a dev dependency, does this mean when I run NPM install on the production server - grunt will not be installed into node modules?
What is the correct option to be able to use Grunt both locally and on the production server?
It doesn't matter if you install Grunt as a dev dependency, it will still be installed when you run npm install.
The scenario where dev dependencies are not installed is when you run npm install <package> because the consensus is you are an end user looking to use (not build/test) the package. However, you can still include the dev dependencies by adding the --dev flag.
You should install grunt with --save-dev. What it does is add a line to your project's package.json. Similar to when you install any other node module with --save-dev. Then, if you run npm install on any machine with the same package.json, all those modules will be downloaded and installed locally, and usable by your project.
As for running different tasks in production and development, I assume you know how to configure grunt to do that.
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.