I trying to use grunt-contrib-sass and receive an error:
You need to have Ruby and Sass installed and in your PATH for this task to work.
But i'm sure that i already install Ruby and Sass.
I have check it with below command
ruby -v and receive 1.9.3p545
sass -v and receive 3.4.5
So that make me sure i already install Ruby and Sass.
But when i use
grunt sass
I receive that error.
Please help me and i really appreciate it.
Sorry my English is not so good.
This is my package.json
{
"name": "TEST",
"version": "0.0.1",
"dependencies":
{
"grunt": "~0.4.5",
"grunt-contrib-sass": "~0.8.1"
}
}
and this is gruntfile.js
module.exports = function(grunt)
{
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.initConfig
({
sass:
{
dist:
{
options:
{
style: 'compressed'
},//options
files:
{
'css/style.css': 'component/sass/style.scss'
}//files
}//dist
}//sass
})//initConfig
}//exports
Run gem install sass and everything should be fine. Because a fresh install fixes the installation paths and bindings.
Related
I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be compiled to the app.css file in the public map.
I have 1 main problem. All images in the sass files (resources/assets/images) are not compiling as I would like to have.
Code in SASS file (resources/assets/SASS/banners.scss)
section.module.parallax-1 {
background-image: url('../images/banner1.jpg');
}
Compiled with mix in (app.css)
section.module.parallax-1 {
background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}
So instead of compiling the url to css like I have it in my SASS file, it compiles it to something different with the hash at the end. Also, after compiling the sass it generates a images map with the images I used in my SASS files. My images map originally is located at resources/assets/images.
I don't know what I am doing wrong. I've tried to change the url in my sass files but this will not help. Is there someone who can help me out? Or is there a other solution for this?
webpack.mix code / js
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I had the same issue right now. As far as I can see this is no longer the case in the newest laravel mix version. But since its not yet up on npmjs
You can use the following fix:
in webpack.mix.js add
mix.options({
processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
});
Then copy node_modules/laravel_mix/setup/webpack.config.js to your root directory.
(Same as where the webpack.mix.js is)
Find and remove this string from your new webpack.config.js file
{ loader: 'resolve-url-loader' + sourceMap },
When thats done you have to update your npm scripts to use your webpack.config.js file.
In your package.json use these scripts instead
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},
I have the current version of npm installed and things seem to be OK:
The autoprefixer loads up just fine :
I created a file 'Grunfile.js'in the local project folder:
I am running this on windows 8.1
Where to from here? How do I tell grunt to check the file? How do I call the function from the command line ? Or do I call the function from the command line?
Within your directory you'll need to have 2 files, the package.json and the Gruntfile.js. To create a package.json file run the command npm init.
Next, you need to add the grunt-autoprefixer task to your package.json file which you can do by running npm install grunt-autoprefixer --save-dev.
Then, within the Gruntfile.js it should look something like this:
module.exports = function(grunt) {
grunt.initConfig({
autoprefixer: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', [
'autoprefixer'
]);
};
For more details on editing the settings on autoprefixer check out the documentation: https://github.com/nDmitry/grunt-autoprefixer
To learn more about Grunt check out https://learngrunt.com
I made a folder g in root(C:/) in where I try to install Grunt via npm.
I sucessfull made: npm install -g grunt-cli.
I configured package.json to this:
{
"name": "testing",
"version": "0.0.0",
"dependencies": {
"grunt": "~0.4.5" },
"description": "testing",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5"
}
}
So good so far.
BUT: When I try to install Grunt: npm install grunt --save-dev and modules(plugins) then I run into this error: npm WARN package.json testing#0.0.0 No repository field...
I use GitHub where I've forked Grunt and Grunticon.
Then I can't succed with nothing towards installing Grunt...
Any good clues and help in solving this?
Okay, I think I see the problem clearly now. Here are some instructions for getting Grunt running, try to follow these exactly, do not create any other folders as it could cause issues for Grunt or Node.
Create a folder for your project, this can be anywhere on your system.
Save the file you have above as package.json in that folder.
Now install the global Grunt CLI
~$ npm install -g grunt-cli <-- Note this is "grunt-cli" NOT "grunt"
Then go to the new directory you created and run this command:
~/new-directoty$ npm install
This will install the Grunt runtime locally for your project because it is specified in package.json
Create a very simple config file in the new directory and name it Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({ /* your config will go in here */ });
/* multi-task definitions go here */
};
Now try to run Grunt just to test that it works:
~/new-directory$ grunt
After that you are ready to start adding plugins, but that's a bigger topic. Good luck.
I'm trying to setup gruntJS on my local machine. These are the steps I have already done:
Install nodeJS
Download gruntJS in a root folder of project with command:
npm install -g grunt-cli
Download grunt also in a root folder of project with:
npm install grunt
Also, I have created Gruntfile.js and here is content of it:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min: {
css: {
src: 'templates/folder1/css/*.css',
dest: 'app.min.css'
}
},
});
};
And I was expected how this will work and minimize all css files and move it to the root ( because destination specified as root ).
I need to say how I was follow this tutorial:
https://www.youtube.com/watch?v=q3Sqljpr-Vc
And I really don't know what I do wrong.
Here is how I call grunt and error ( its better to say warning message ) which I get:
C:\wamp\www\myProject>grunt min
Warning: Task "min" not found. Use --force to continue.
Aborted due to warnings.
you need to install some tasks for use. From your example i would guess you are trying to minify some CSS?
For that i would use the grunt-contrib-cssmin task. To use first install using
npm install grunt-contrib-cssmin
you will also need to register the task at the bottom of your gruntfile like this grunt.loadNpmTasks('grunt-contrib-cssmin').
then your gruntfile will look like this
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
cssmin: {
minify: {
src: ['templates/folder1/css/*.css'],
dest: 'app.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('min' ['cssmin']);
};
For more info i recommend you read the documentation and familiarise yourself with the examples at http://gruntjs.com/sample-gruntfile
I have installed Grunt like so `npm install -g grunt-cli successfully.
I have also installed the grunt-contrib-concat libary succesfully like so: npm install grunt-contrib-concat --save-dev
I have created a package.json:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2"
}
}
and a Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/init.js', 'src/Game.js', 'ui/Ui.js', 'ui/AddBTS.js', 'ui/Toolbar.js'],
dest: 'built.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};
Now when I run grunt concat I get the following error:
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:
This is my first time using Grunt and I've been trying to solve this problem for over 2 hours now. Please could someone help me and advise what I've not set up correctly.
Thanks in advance!
It's likely that Grunt is not installed locally in your project folder (which is different than grunt-cli). You have it in your package.json so try doing npm install or alternately npm install grunt.
For more information see the getting started page:
Note that installing grunt-cli does not install the grunt task runner! The job of the grunt CLI is simple: run the version of grunt which has been installed next to a Gruntfile. This allows multiple versions of grunt to be installed on the same machine simultaneously.