Roots sage starter theme installation - wordpress

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.

Related

How to Install Kint Globally Drupal - Without Devel Module

I was trying to setup an easy way to debug the Lando Drupal installations using Kint module. But I don't want to install the Devel and Devel Kint Extras modules in each Installations.
What I have initially done is installed the Kint globally in my local.
composer global require kint-php/kint
But it is not possible to access the functions inside a Lando installation by requiring the global autoload file to the settings.local.php
include_once('/home/username/.composer/vendor/autoload.php');
The same is working on local Drupal installation, but not inside Lando installations.
Yes, it is possible to install PHP Kint Library globally for Drupal Projects without Devel Module installed.
Install Kint Globally
Install PHP Kint Library globally.
composer global require kint-php/kint
Then copy the file path where the composer globally installed. If you are unable to find where the composer global directory, use the below command.
composer config --list --global
And figure out the [home] directory from the list.
Now go to your settings.local.php in your drupal project. And include the global autoload file as below.
include_once('/var/www/.composer/vendor/autoload.php');
if (class_exists('Kint')) {
Kint::$depth_limit = 4;
}
Change the /var/www/.composer/ to your home directory.
For example: /home/adharsh/.config/composer/vendor/autoload.php
Usually the settings.local.php file is gitignored, so there will be no change for your code base and the Kint is now ready to use.
Yeah, its ready to use.
Go to the file you want to debug and use d() function to debug.
Example: d($variable);
More functions are available in the Kint documentation.
Install in Lando
NOTE: If you are a lando user, you have to ssh (lando ssh) into lando and globally install Kint. The composer global directory will be in /var/www/.composer . You may need to reinstall the Kint globally if you are rebuilding Lando.
But you can add the run command in lando file to install the composer on lando build.
services:
appserver:
type: 'php:7.4'
run:
- "cd $LANDO_MOUNT && wget https://getcomposer.org/download/2.3.9/composer.phar"
- "chmod +x composer.phar"
- "php composer.phar install -n"
- "php composer.phar global require kint-php/kint"
- "rm composer.phar"
Replace the https://getcomposer.org/download/2.3.9/composer.phar composer download link with you specific composer version from getcomposer and save the lando file.

Object not found error when accessing roots sage theme css file

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

Grunt command - unable to find local grunt

I copied an existing Grunt project from git repo and when i run - grunt serve-dev command it tells me the following:
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
But if i - grunt -version it says:grunt-cli v0.1.13.
What might be the issue?
Be sure to run npm install after cloning the repo. Usually the node_modules, such as grunt aren't included the repo itself by default, but you must install them yourself.

What is the correct option to use Grunt locally and on the production server, --save or --save-dev?

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.

Questions about install gruntjs

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.

Resources