Here is my sass declaration in my gruntfile.
sass: {
dist: {
options: {
implementation: 'node-sass',
style: 'expanded',
noCache: true
},
files: {
'dist/css/jk.css' : 'src/styles/jk.scss'
}
}
},
Here is the output when running grunt -v.
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: src/styles/jk.scss -> dist/css/jk.css
Options: precision=10, implementation="node-sass", style="expanded", noCache
undefined
Fatal error: The "original" argument must be of type function
It appears that sass is getting executed, and is sending my file paths correctly, but for some reason returning undefined.
I am able to compile my sass files manually by command line without any issue.
Here's some version information from my package.json
"grunt": "^1.0.3"
"grunt-sass": "^3.0.1"
"node-sass": "^4.9.3"
Whats your version of Node??
also look at this
https://github.com/sindresorhus/grunt-sass/issues/288
Related
I want to replace few sass variable values inside a sass config file.
For example, I want to replace the value of variable "$file_global" = "new";
I want to use "grunt-sass-replace" package to do the work, i tried alot but its giving me various errors.
My Project Directory Structure:
grep/
/node_modules/
package.json
Gruntfile.js
src/
my-styles.scss
my-styles.scss Code:
$file_global: "old";
Gruntfile.js Code:
module.exports = function(grunt){
pkg: grunt.file.readJSON('package.json'),
grunt.initConfig({
'sass-replace': {
files: { // File Options
src: 'src/my-styles.scss',
dest: 'dest/my-styles.scss'
},
options: {
variables: [
{
name: 'file_global',
to: 'new'
}
]
}
}
});
grunt.loadNpmTasks('grunt-sass-replace');
grunt.registerTask('default', ['sass-replace']);
};
package.json Code:
{
"name": "grep",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "KJ",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.4",
"grunt-sass-replace": "^0.1.18",
"npm-check-updates": "^3.1.9"
}
}
I updated the "files" but its still giving me various errors.
Below are the options that i tried and the errors generated.
First Try
// Option First :
files: {
'dest/my-styles.scss': 'src/my-styles.scss'
},
ERROR :
C:\wamp64\www\GREP>grunt
>> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
Running "sass-replace:files" (sass-replace) task
Warning: no files passed. Use --force to continue..
Aborted due to warnings.
Second Try:
// Option Second :
files: [
{
src: 'src/my-styles.scss',
dest: 'dest/my-styles.scss'
}
],
ERROR :
C:\wamp64\www\GREP>grunt
>> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
Running "sass-replace:files" (sass-replace) task
Warning: pattern.indexOf is not a function Use --force to continue.
Aborted due to warnings.
Last Try:
// Option Third :
files: {
src: 'src/my-styles.scss',
dest: 'dest/my-styles.scss'
},
ERROR :
C:\wamp64\www\GREP>grunt
>> Tasks directory "C:\wamp64\www\GREP\node_modules\grunt-sass-replace\node_modules\grunt-string-replace\tasks" not found.
Running "sass-replace:files" (sass-replace) task
>> [1] scss files found in [1] passed files.
>> replacements resolved successfully.
running string-replace task.
Warning: Task "string-replace:sass" not found. Use --force to continue.
Aborted due to warnings.
Anyone know how to solve this error, or any other grunt package which can do this kind of work.
This package was last updated 3 years ago, also it uses grunt ~0.4.5. I can't help you with this, However checkout "grunt-sass-replace-values" from https://www.npmjs.com/package/grunt-sass-replace-values. This package is updated a year ago and patched.
npm install grunt-sass-replace-values --save-dev
Check out following issue on Github:
https://github.com/eliranmal/grunt-sass-replace/issues/1
Explanation :
Cause of errors :
You defined sass variable incorrectly. Variables should be defined as "$variable: value;" and not like "$variable = value;"
As of the Github issue with this package, you need to update the path to your "grunt-string-replace" dependency.
Solution :
Under your project root folder, Go to below directory:
node_modules/grunt-sass-replace/tasks
Once you're in the above directory, look for a file name "sass-replace.js"
Just open the file with any Text Editor, and Edit the path to dependency.
grunt.task.loadTasks(path.resolve(__dirname, '../node_modules/grunt-string-replace/tasks'));
In your case edit this like as below :
grunt.task.loadTasks(path.resolve(__dirname, '../../../node_modules/grunt-string-replace/tasks'));
I hope this solves your problem. If not use another package, or use older node and grunt(0.4.5) versions.
After migrating to El Capitan, it seems users are experiencing an issue with grunt installations, possibly related to the rootless changes of El Capitan. In particular, running the grunt --force command results in EPERM errors. The workflow is as follows:
Assuming npm has been installed, navigate to the grunt directory with package.json and gruntfile.js and invoke grunt:
grunt --force
Example Gruntfile.js file contents:
module.exports = function(grunt) {
// All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// Configuration for concatenating files goes here.
dist: {
src: [
'../js/libs/owl.carousel.js',
'../js/libs/jquery.actual.js',
'../js/libs/chosen.jquery.js',
'../js/libs/jquery.parallax.js',
'../js/src/common.js'
],
dest: '../js/pro/global.js',
},
},
uglify: {
build: {
src: '../js/pro/global.js',
dest: '../js/pro/global.min.js',
},
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '../img/src/',
src: ['**/*.{png,jpg,gif}'],
dest: '../img/pro/'
}]
}
},
compass: {
dev: {
options: {
sassDir: '../sass',
cssDir: '../css',
fontsDir: '../fonts',
imagesDir: '../img/',
images: '../img/',
javascriptsDir: '../js/pro',
//environment: 'development',
outputStyle: 'compressed',
relativeAssets: true,
httpPath: '.',
}
},
},
watch: {
scripts: {
files: ['../js/**/**.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: true,
},
},
images: {
files: ['../img/src/**.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: true,
}
},
compass: {
files: ['../**/*.{scss,sass}'],
tasks: ['compass:dev'],
}
},
svgstore: {
defaults: {
options: {
prefix : 'icon-',
},
files: {
'../img/svg-defs.svg': ['../img/svg/*.svg']
}
}
},
});
// Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-svgstore');
// Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', /*'imagemin',*/ 'compass', 'svgstore', 'watch']);
};
Example package.json file contents:
{
"name": "Call Me Maybe",
"version": "0.2.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-compass": "^1.0.4",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-imagemin": "^0.9.4",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.9.2",
"grunt-contrib-watch": "^0.6.1",
"grunt-svgstore": "^0.5.0"
}
}
The resulting EPERM errors are as follows:
Running "concat:dist" (concat) task
Warning: Unable to write "../js/pro/global.js" file (Error code: EPERM). Used --force, continuing.
Running "uglify:build" (uglify) task
Warning: Unable to write "../js/pro/global.min.js" file (Error code: EPERM). Used --force, continuing.
Running "compass:dev" (compass) task
Warning: Command failed: /bin/sh: compass: command not found. Used --force, continuing.
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Used --force, continuing.
Running "svgstore:defaults" (svgstore) task
Warning: Unable to write "../img/svg-defs.svg" file (Error code: EPERM). Used --force, continuing.
Running "watch" task
Waiting...
Interestingly, Ruby and Compass are also installed, so it does align with the theory of the rootless unable to write to folders issues, but how can the dependency cores be moved elsewhere (i.e. /usr/local/bin) so this isn't an issue?
During the El Capitan Betas, some users suggested enabling root via terminal - though this seemingly no longer works, as the error persists and /usr/bin folder still doesn't allow for permission changes.
For those running into the same issue, I had to eliminate the use of binaries installed to the path: /usr/bin, and reinstall after updating the path /usr/local/bin. Ruby tended to be the primary culprit. Because I was struggling with locating all my ruby installs, I ended up installing rbenv to manage my ruby versions.
The following terminal commands may be helpful in identifying your problematic paths:
which ruby
gem environment
gem uninstall [insert gem name here]
[google how to set your paths to /usr/local/bin... (will be in a hidden file)]
gem install [insert gem name here]
Installing non-system software on /usr/bin is a bad move, and is now prohibited in El Capitan, and with good reason.
I am not familiar with grunt, but if you can get to use /usr/local/bin instead then probably everything works.
I'm running Lion 10.9.2 with nodejs v0.10.26
I want to setup an automated compilation on sass files and a live reload with grunt, nothing complicated but...
When running grunt watch I get the following error
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
util.js:35
var str = String(f).replace(formatRegExp, function(x) {
^
RangeError: Maximum call stack size exceeded
here is the Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/styles.css': 'assets/sass/styles.scss'
}
}
},
watch: {
all: {
files: 'index.html', // Change this if you are not watching index.html
options: {
livereload: true // Set livereload to trigger a reload upon change
}
},
css: {
files: [ 'assets/sass/**/*.scss' ],
tasks: [ 'sass' ],
options: {
spawn: false
}
},
options: {
livereload: true // Set livereload to trigger a reload upon change
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('watch', [ 'watch']);
grunt.registerTask('default', [ 'sass', 'watch' ]);
};
and here is the package.json
{
"name": "application",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-sass": "~0.7.3"
}
}
I finally figured out a similar problem I was having with SASS. I was using
grunt.registerTask('sass', [ 'sass']);
The trick was that Grunt doesn't seem to like the repetition in names. When I switch to
grunt.registerTask('styles', [ 'sass']);
Everything worked as it should.
Just had this problem. Resolved it by removing grunt.registerTask('watch', [ 'watch']);
I just fixed a similar error "Recursive process.nextTick detected" causing by command: grunt server
The solution? Use sudo grunt serve instead
you could try this one, it fixed the issue for me, working with Yeoman 1.3.3 and Ubuntu 14.04 Grunt watch error - Waiting...Fatal error: watch ENOSPC
I was getting error in even trying to install grunt. Running npm dedupe solved my problem as answered here: Grunt watch error - Waiting...Fatal error: watch ENOSPC
Alternative solution: check your watch for an empty file argument.
Here's an excerpt of my gruntfile
watch: {
all: {
options:{
livereload: true
},
files: ['src/scss/*.scss', 'src/foo.html',, 'src/bar.html'],
tasks: ['default']
}
}
In my case, I could recreate the original poster's error on demand with the empty argument above.
My Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ts: {
dev: {
src: ["src/background/*.ts"],
out: ["build/background.js"],
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts:dev"]);
};
(I am using grunt-ts.)
System info
Windows 8.1
NodeJS v0.10.24
grunt-cli v0.1.11
grunt v0.4.2
I've already searched the Internet and found many resources about this error, but they all say that one should upgrade NodeJS and/or Grunt. I've already tried that. I had even completely re-installed Grunt, however, the error remained.
The complete error message:
P:\my-folder>grunt ts
Running "ts:dev" (ts) task
Warning: Arguments to path.resolve must be strings Use --force to continue
Aborted due to warnings.
package.json
{
"name": "regex-search",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-ts": "~1.5.1"
}
}
After comparing my Gruntfile with the officially provided sample file, I found my really silly mistake:
ts: {
dev: {
src: ["src/background/*.ts"],
out: ["build/background.js"],
}
}
out must not be an array!
The correct version:
ts: {
dev: {
src: ["src/background/*.ts"],
out: "build/background.js",
}
}
So in my particular case, a node module's main attribute in package.json was an array and not a string, example in history.js' package.json:
{
"main": [ './history.js', './history.adapter.ender.js' ]
}
The way I found this out was going to where the error originated in my node_modules and then did console.log(pkg.main) right above it.
Original stacktrace:
Fatal error: Arguments to path.resolve must be strings
TypeError: Arguments to path.resolve must be strings
at Object.posix.resolve (path.js:422:13)
at /Users/ebower/work/renvy/node_modules/browserify/node_modules/resolve/lib/async.js:153:38
at fs.js:336:14
at /Users/ebower/work/renvy/node_modules/grunt-browserify/node_modules/watchify/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:104:5
at /Users/ebower/work/renvy/node_modules/grunt-mocha/node_modules/mocha/node_modules/glob/node_modules/graceful-fs/graceful-fs.js:104:5
at FSReqWrap.oncomplete (fs.js:99:15)
I am trying to use Grunt for the first time. I think that I'm properly following the directions to install and use Grunt with a plugin (grunt-text-replace). (See, for instance, Grunt's page and the plugin's.) But I can't successfully run anything -- instead, I keep getting the same error. I've been checking my code against the instructions from both Grunt and the plugin, but I can't see anything I did wrong.
Here is my package.json file:
{
"name": "brink-prototype",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-text-replace": "~0.3.2"
}
}
And here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
replace: {
src: ['components/bootstrap/less/navbar.less'],
dest: 'build/',
replacements: [{
from: /\.box-shadow.*$/g,
to: ''
}]
}
});
grunt.loadNpmTasks('grunt-text-replace');
grunt.registerTask('default', ['replace']);
};
When I run "grunt" in the command line, I get the following error:
Running "replace:src" (replace) task
Warning: No source files found Use --force to continue.
Aborted due to warnings.
I also tried this process with another plugin (grunt-regex-replace) and had exactly the same error message.
Where have I gone wrong?
UPDATE:
Here are the relevant parts of the file structure:
project/
Gruntfile.js
package.json
components/
bootstrap/
less/
navbar.less
node_modules/
grunt/
grunt-text-replace/
I have been trying to run the command from the project/ directory, where the Gruntfile.js is.
Maybe the path in my src should be relative to something else? I don't know.
The grunt-text-replace plugin requires you to specify a subtask.
replace: {
aSubtaskName: {
src: ['components/bootstrap/less/navbar.less'],
dest: 'build/',
replacements: [{
from: /\.box-shadow.*$/g,
to: ''
}]
}
}