Task not found error while using Grunt task runner - javascript

I am on a Windows machine and I believe I have installed everything I need to run the grunt task:
grunt sass
I have already executed the following commands in my terminal:
npm install grunt-sass --save-dev
npm install time-grunt --save-dev
npm install jit-grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-browser-sync --save-dev
I am getting the following error:
Warning: Task "sass" not found. Use --force to continue.
Aborted due to warnings.
I have tried every possible solution from other similar posts but to no avail. My Gruntfile.js is as follows:
"use strict";
module.exports = function (grunt) {
require("time-grunt")(grunt);
require("jit-grunt");
grunt.initConfig({
sass: {
dist: {
files: {
"css/styles.css": "css/styles.scss"
}
}
},
watch: {
files: "css/*.scss",
tasks: ["sass"]
},
browserSync: {
dev: {
bsFiles: {
src: [
"css/*.css",
"*.html",
"js/*.js"
]
},
options: {
watchTask: true,
server: {
baseDir: "./"
}
}
}
}
});
grunt.registerTask("css", ["sass"]);
grunt.registerTask("default", ["browserSync", "watch"]);
};

I have managed to find the solution. Make the following changes to the file:
"use strict";
module.exports = function (grunt) {
const sass = require('node-sass'); // add this line
require("time-grunt")(grunt);
require("jit-grunt")(grunt);
grunt.initConfig({
sass: {
dist: {
files: {
"css/styles.css": "css/styles.scss"
}
}
},
watch: {
files: "css/*.scss",
tasks: ["sass"]
},
browserSync: {
dev: {
bsFiles: {
src: [
"css/*.css",
"*.html",
"js/*.js"
]
},
options: {
implementation: sass, //add this line
sourceMap: true, //add this line
watchTask: true,
server: {
baseDir: "./"
}
}
}
}
});
grunt.registerTask("css", ["sass"]);
grunt.registerTask("default", ["browserSync", "watch"]);
};

Related

Why does Gulp-Bundle task complain about wrong configuration with Gulp v4?

How is it possible..?
I tried to create a bundle task with the package called gulp-bundle-assets but it doesn't work. This is the sample-config from the documentation with my files which I wanna bundle...
If I try gulp bundle the console says:
Configuration file should be in the form "{ bundle: {}, copy: {} }"
// bundle.config.js
module.exports = {
bundle: {
main: {
styles: './content/**/*.css',
},
vendor: {
scripts: [
'./node_modules/jquery/dist/jquery.js',
'./node_modules/instafeed.js/instafeed.js',
'./node_modules/slick-carousel/slick/slick.js',
],
},
},
copy: './assets/**/*.{png,svg}',
};
My gulp task looks like:
// gulpfile.js
gulp.task('bundle', function() {
return gulp.src('./bundle.config.js')
.pipe(bundle())
.pipe(gulp.dest('./public'));
});
My versions:
npm v6.4.0
node v10.6.0
gulp v4.0.0
gulp-bundle-assets v2.29.0

Grunt returns Cannot GET/ , ModRewrite does't work

I'm very new to Grunt (started this Friday).
when I run Grunt Serve, it opens a page with just the words "cannot GET/" on it. I found the ModRewrite fix and implemented it.
Yet when I try to get my grunt working, it still returns the same error.
Any help would be greatly appreciated
Here is my Gruntfile:
/* global module:true
*
* Gruntfile.js
* npm install -g grunt-cli
* npm install grunt-contrib-less grunt-contrib-watch grunt-contrib-connect --save-dev
*/
module.exports = function(grunt) {
'use strict';
var serveStatic = require('serve-static');
var phpMiddleware = require('connect-php');
var modRewrite = require('connect-modrewrite')
grunt.initConfig({
connect: {
server: {
options: {
port: 8765,
livereload: 35729,
open: true,
middleware: function(connect, options) {
var middlewares;
middlewares = [];
middlewares.push( modRewrite( ['^[^\\.]*$ /index.html [L]'] ) );
var directory = options.directory || options.base[options.base.length - 1];
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Magic happens here
middlewares.push(phpMiddleware(directory));
options.base.forEach(function(base) {
// Serve static files.
middlewares.push(serveStatic(base));
});
// Make directory browse-able.
//middlewares.push(connect.directory(directory));
return middlewares;
}
}
}
}
,
// Less files are in app/less, output is in app/css
less: {
development: {
options: {
paths: ["./less"],
yuicompress: false
},
files: {
"./css/style.css": "./less/style.less"
}
}
},
watch: {
options: {
livereload: 35729
},
files: "./less/*.less",
tasks: ["less"]
},
uglify: {
dist: {
options: {
sourceMap: 'js/map/source-map.js'
},
files: {
'js/plugins.min.js': [
'js/source/plugins.js',
'js/vendor/**/*.js',
'js/vendor/modernizr*.js'
],
'js/main.min.js': [
'js/source/main.js'
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Run grunt server to get going
grunt.registerTask('serve', [
'connect',
'watch'
]);
grunt.registerTask('server', function () {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve']);
});
};
Changed middlewares.push( modRewrite( ['^[^\\.]*$ /index.html [L]'] ) );
to middlewares.push( modRewrite( ['^[^\\.]*$ /index.php [L]'] ) );

Grunt-Browserify Ignore Option

I have a React app that I am transforming, uglifying and browserfying via Grunt. My grunt file looks like this...
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'./Scripts/build/App.js': ['./Scripts/src/**/*.js']
},
options: {
browserifyOptions: {
debug: true
},
transform: [ require('grunt-react').browserify ],
ignore: './Scripts/src/**/*-test.js'
}
}
},
uglify: {
my_target: {
files: {
'./Scripts/build/App-min.js': ['./Scripts/build/App.js']
}
}
},
watch: {
scripts: {
files: ['./Scripts/src/**/*.js'],
tasks: ['browserify', 'uglify'],
options: {
spawn: false
},
},
},
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
}
You will notice the ignore property of the browserify task is telling it to ignore any file with -test.js in the filename, the reason being that my tests are stored in folders directly next to the file I am testing (as seems to be the convention when looking at the React Flux examples) and I don't want the test files being bundled in to my app.js file. Can anyone tell me if I am doing this wrong because so far it doesnt seem to be working at all? The test files get bundled into app.js and then I get console errors about jest not being defined.
Did a bit of lateral Googling and found a post on stack Here
It seems that you can add files to the src array and if you prefix them with a '!' it marks them as ignored files.
My now working grunt file....
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'./Scripts/build/App.js': ['./Scripts/src/**/*.js', '!./Scripts/src/**/*-test.js']
},
options: {
browserifyOptions: {
debug: true
},
transform: [ require('grunt-react').browserify ]
}
}
},
uglify: {
my_target: {
files: {
'./Scripts/build/App-min.js': ['./Scripts/build/App.js']
}
}
},
jest: {
options: {
coverage: true,
testPathPattern: /.*-test.js/
}
},
watch: {
scripts: {
files: ['./Scripts/src/**/*.js'],
tasks: ['browserify', 'uglify'],
options: {
spawn: false
},
},
},
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-jest');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
}

SASS Grunt error

I try to added the Sass task to my grunt process using the grunt-contrib-sass plugin but when i run it he create the css files but this file is empty
This is my Gruntfile.js :
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style:'expanded',
trace: true
},
files: {
'main.css':'sass/app.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
When i start the command "grunt" i have this :
Running "watch" task Waiting..... File "sass\app.scss"
changed Running "sass:dist" task (and nothing)
I have :
Ruby 2.1.5 [x64-mingw32]
SASS : 3.4.10
Grunt : newest version
Thanks !
Could you try changing this:
watch: {
css:
files: '**/*.scss',
tasks: ['sass']
}
}
To this:
watch: {
css:
files: '/**/*.scss',
tasks: ['sass']
}
}
To make sure it watches from the root of the project

Grunt and Bourbon - Cannot Find Module 'Bourbon'

I'm trying to use GruntJS to make some improvements to my workflow - I've been using Compass for a while but I'm wanting to try out Bourbon and so I've been trying to get this working but failing.
I'm getting the following error when I run 'grunt':
ERROR: Cannot find module 'bourbon'
I've installed this through Node using 'npm install' with the following 'package.json' file:
{
"name" : "project",
"description": "description",
"version" : "0.0.1",
"dependencies" : {
"node-sass": "~0.8.4",
"node-bourbon": "~1.0.0",
"grunt": "~0.4.4",
"grunt-contrib-watch": "~0.6.1",
"grunt-sass": "~0.12.0",
"grunt-contrib-uglify": "~0.4.0",
"matchdep": "~0.3.0"
}
}
My grunt file looks like this:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify: {
my_target: {
files: {
'assets/js/main.js': ['_/js/scripts.js']
} // files
} // my_target
}, // uglify
sass: {
dist: {
options: {
includePaths: require('bourbon').includePaths,
outputStyle: 'compressed'
},
files: {
'assets/css/main.css': '_/stylesheets/**/*.scss'
}
}
},
watch: {
options: { livereload: true },
grunt: { files: ['gruntfile.js'] },
scripts: {
files: ['_/js/scripts.js'],
tasks: ['uglify']
}, //script
sass: {
files: ['_/stylesheets/**/*.scss'],
tasks: ['sass']
}, //sass
php: {
files: ['**/*.php']
}
} //watch
}) //initConfig
grunt.registerTask('default', 'watch');
} //exports
I've also imported the file in the top of my SCSS stylesheets using:
#import 'bourbon';
Not sure what I'm doing wrong here, any help would be greatly appreciated!
Please let me know if you need any more info.
You are requiring the wrong package name. It should be:
includePaths: require('node-bourbon').includePaths
but you have:
includePaths: require('bourbon').includePaths
Install Bourbon manually:
Install the gem:
$ gem install bourbon
Install Bourbon into your project's stylesheets directory by generating the bourbon folder:
$ bourbon install

Categories