I'm using Grunt to live convert my SASS files to CSS via watch.
The thing is: I can run the Compass task normaly, the CSS is created very well, but when I use WATCH I got the error:
grunt.util._.contains is not a function
Here's my package.json:
{
"name": "myName",
"description": "myDesc",
"author": "mySelf",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-compass": "^1.1.1",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "^0.4.4"
}
}
Here's my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
watch: {
css: {
files: 'assets/**/*.{scss,sass}',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['compass','watch']);
};
I try a lot of changes but nothing helps
Update!
After a long night, solve the problem... Please read my own answer
I solved the problem! The ^4.0 lodash version has changed contains to includes, and the grunt-contrib-watch uses the old lodash syntax. So I changed only one line in the code. Find
node_modules/grunt-contrib-watch/tasks/watch.js on line 116:
Old line:
if (!grunt.util._.contains(target.options.event, 'all') && !grunt.util._.contains(target.options.event, status)) {
New line:
if (!grunt.util._.includes(target.options.event, 'all') && !grunt.util._.includes(target.options.event, status)) {
Now the Watch with Compass/SASS works like a charm ;)
I hope it helps someone!
Related
I am trying to watch sass changes but I am not be able to see any changes on main.css whenever I update on sass files.Can some please suggest me what I am doing wrong here I am new to grunt js .
{
"name": "test-scss",
"version": "0.1.0",
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-watch": "^1.0.0"
},
"scripts": {
"build-css": "node-sass --include-path scss sass/style.scss css/main.css"
}
}
/// here is my gruntjs file configuration
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
livereload: true
},
sass: {
files: ['**/*.scss'],
task: ['sass']
},
html: {
files: ['*.html']
}
},
sass: {
dist: {
files: {
'css/main.css': 'sass/style.scss'
}
}
},
connect: {
sever: {
options: {
keepalive: true,
hostname: 'localhost',
port: 3003,
base: '.',
open: true,
watch: true,
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['sass', 'watch', 'connect']);
};
Grunt watch is a blocking task so grunt connect is never reached.
grunt-contrib-connect blocks only if keepalive: true is set otherwise it runs as long as grunt is running. As grunt watch runs indefinitely you do not need to force grunt-contrib-connect to "keepalive"
To fix.
keepalive: false //turn off keepalive
Move watch blocking task to execute last
grunt.registerTask('default', ['sass','connect','watch']);
If you absolutely need to run two blocking tasks together you can use a plugin like grunt-concurrent
https://stackoverflow.com/a/42319772/3656963
Or call each task separately using 2 command lines.
Also fix typo: task: ['sass'] to tasks: ['sass']
How do I run my 'test' npm script using Grunt? It says here that I can do it using grunt-run.
package.json
.
.
"scripts": {
"test": "jest"
},
"jest": {
"preset": "jest-exponent"
}
.
.
.
"devDependencies": {
"babel-jest": "^17.0.0",
"babel-preset-react-native": "^1.9.0",
"grunt": "^1.0.1",
"grunt-run": "^0.6.0",
"jest-exponent": "^0.1.3",
"jest-react-native": "^17.0.0",
"react-test-renderer": "^15.3.2"
}
Gulpfile.js - boilerplate code
module.exports = function(grunt) {
grunt.initConfig({
run: {
options: {
// Task-specific options go here.
},
your_target: {
cmd: 'executable',
args: [
'arg1',
'arg2'
]
}
}
})
}
What is the point of Grunt/Gulp if you can just use npm scripts? They require a lot less set up and do the same thing.
not sure if that will helps you, you need install first the task grunt-exec, in my sample i am runing a node server.js
this in my config.
Gruntfile.js
config.exec = {
run_server: 'node server.js'
}
grunt.registerTask('serve', ['exec:run_server']);
package.json
"grunt-exec": "^1.0.1",
Hi I am trying to learn grunt tutorial from youtube and I am following the same instruction as mention in the video.
But while running the command grunt in my system I am getting the error , which I am not able to resolve it.
Below is my package.json
{
"name": "shreyansh",
"version": "1.0.0",
"description": "running grunt test",
"main": "index.html",
"author": "shreyansh",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-uglify": "^2.0.0"
}
}
Gruntfile.js
module.exports = funtion(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine:{
files:{
'Project/css/main.css': [ 'file-upload.css']
}
}
}
});
grunt.LoadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin'])
};
Error : -
Loading "Gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected token {
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
I tried to look for the similar errors questions from stackoverflow but no luck.
Any help is appreciated as I am using grunt first time
Thanks
Fix the typo in line 1 of your gruntfile, change funtion to function:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine:{
files:{
'Project/css/main.css': [ 'file-upload.css']
}
}
}
});
grunt.LoadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin'])
};
Using latest node and Grunt 0.4.x, react 0.10.x
What to via Grunt execute browserify on React JSX files that have requires on jquery in them:
var $ = require('jquery');
Tried moving the shim transformation into the package.json after reading about a similar problem. Have the following at the bottom of my package.json file:
"browser": {
"jquery": "./bower_components/jquery/jquery.min.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
}
Can't get it browserify to resolve on a simple JavaScript file (with just "var $ = require('jquery');) from Grunt. Gruntfile.js has:
browserify: {
options: {
debug: true
},
src: ['src/views/**/*.js'],
dest: 'build/javascript/client.js'
},
Running Grunt gives the following error:
Error: module "jquery" not found from "D:\\development\\projects\\Prenotes\\src\\views\\dummy.js"
If and when I get this working then I assume "reactify" can be added to the transform array in the package.json.
I put "reactify" in my transform segment in the package.json and redid the Grunt browserify as:
browserify: {
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
Without the "dist" browserify wouldn't run properly.
This got the shim to work but reactify wouldn't run, so I ended up switching back to grunt-react plus pulled the transform logic back into the Gruntfile.js (which just feels better).
So at the end of the package.json there is:
"browser": {
"jquery": "./lib/jquery/jquery.js",
"bootstrap": "./lib/bootstrap/bootstrap.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
}
and in the Gruntfile.js:
browserify: {
options: {
debug: true,
transform: ['browserify-shim', require('grunt-react').browserify]
},
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
This both shims and processes the JSX. Finally.
So I'm making my own Wordpress Framework, and am utilizing grunt and sass. I'm newer at grunt and sass, but experienced enough with grunt to kind of know what I'm doing, but I've used LESS in the past and not Sass.
I'm taking the Gruntfile.js file from roots.io as a starting point. Everything I have is correct as far as I know, but I'm not too sure about a couple of things. I removed the js stuff because I'm not going to be watching for it, and I added grunt-contrib-sass.
When running grunt watch I get this error:
grunt watch
/Gruntfile.js:22
watch: {
^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
Below is my Gruntfile.js and my package.json
Gruntfile.JS
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
version: {
options: {
file: 'lib/scripts.php',
css: 'assets/css/main.min.css',
cssHandle: 'su_styles'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/main.min.css': [
'assets/scss/app.scss'
]
}
}
},
watch: {
sass: {
files: [
'assets/scss/*.scss',
'assets/scss/foundation/*.scss'
],
tasks: ['sass', 'version']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: false
},
files: [
'assets/css/main.min.css',
'templates/*.php',
'*.php'
]
}
},
clean: {
dist: [
'assets/css/main.min.css'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-wp-version');
grunt.loadNpmTasks('grunt-contrib-sass');
// Register tasks
grunt.registerTask('default', [
'clean',
'version',
'sass'
]);
grunt.registerTask('dev', [
'watch'
]);
};
package.json - with some stuff taken out to preserve a bit of privacy
{
"name": "sudoh",
"version": "1.0.0",
"author": "Brandon Shutter <brandon#brandonshutter.com>",
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-wp-version": "~0.1.0",
"grunt-contrib-sass": "~0.5.0"
}
}
Thanks for your help ahead of time.
It seems there wasn't anything wrong with my setup. My code editor (Brackets) added hidden characters for whatever reason and was causing a syntax error. Switching over to Sublime and saving the file again allowed it work perfectly.
Thanks for the help everyone.