I have both files: app.js which starts the http server, and main.js which is compiled by browserify and used in html as
So I have a Grunt configured with forever, browserify and watch.
I want that on app.js chance, the http must be restarted (via forever:restart), and when main.js changes, the build must be browserified (via browserify)
so, when i run grunt, says forever:start does not exist, any help ?
$ grunt
Warning: Task "forever:server1:start" not found. Use --force to continue.
this is my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'examples/public/js/module.js': ['examples/main.js']
}
}
},
forever: {
server1: {
options: {
index: 'examples/app.js',
logDir: 'examples/logs'
}
}
},
watch: {
app: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['forever:server1:start']
},
web: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['browserify']
},
}
});
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['browserify', 'forever:server1:start']);
grunt.registerTask('restart', ['browserify', 'forever:server1:restart']);
};
The task isn't found because you're missing grunt.loadNpmTasks('grunt-forever'). You might also find more success using something like nodemon instead of grunt.
Related
so I am trying to get grunt working ( ive installed the relevant elements ) I'm not sure what settings i have wrong as, this is what comes up in the terminal after 'grunt watch'
$ grunt watch
Running "watch" task
Waiting...
it won't do anything until i hit save. then it will say a change has taken place.
i dont think this is how it's supposed to work.
my gruntfile is:
// Use "grunt --help" to list the available tasks
module.exports = function(grunt) {
grunt.initConfig({
sass: {
// this is the "dev" Sass config used with "grunt watch" command
dev: {
options: {
style: 'expanded',
},
files: {
// the first path is the output and the second is the input
'style.css': 'sass/style.scss',
'style_products.css': 'sass/style_products.scss',
'style-mega-menu.css': 'sass/style-mega-menu.scss'
}
},
// this is the "production" Sass config used with the "grunt default" command
dist: {
options: {
style: 'compressed',
},
files: {
'style.css': 'sass/style.scss',
'style_products.css': 'sass/style_products.scss',
'style-mega-menu.css': 'sass/style-mega-menu.scss'
}
}
},
// configure the "grunt watch" task
watch: {
sass: {
files: ['sass/*.scss', 'sass/**/*.scss',],
tasks: ['sass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// "grunt" is the same as running "grunt sass:dist".
grunt.registerTask('default', ['sass:dist']);
grunt.registerTask('dev', ['sass:dev']);
grunt.registerTask('default', ['watch',]);
};
can anyone pls help?
I've started to learn this just now. I installed the grunt.
If I get grunt watch it is automatic but only in case one file.
How could I make it wath all scss file in my theme, and make the css in different folders.
I don't really undestand how could it working in big.
This is my gruntfile.js now:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
uses_defaults: {}
},
sass: {
dev: {
options: { sourceMap: true },
files: { 'sites/all/themes/uj/css/uj.styles.css' : 'sites/all/themes/uj/sass/uj.styles.scss' }
}
},
watch: {
css: {
files: 'sites/all/themes/uj/**/*.scss',
tasks: [ 'sass:dev' ],
options: { livereload: true }
}
}
});
// Load Grunt plugins
// grunt.loadNpmTasks('');
// Default task(s).
grunt.registerTask('default', []);
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};
Per the official documentation on file globbing, to watch for changes for files of a certain file type in the directory path and its subdirectories, you'll want:
files: ['js/**/*.js']
or:
files: ['css/**/*.*']
I was trying to figure out why my JS wasn't being compiled by grunt, so I edited the gruntfile.js. And then grunt watch stopped. I've tried reverting the file with git and I've npm installed to try to see if that might help... does anyone see a problem with my gruntfile? Or perhaps have another possible solution?
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig({
uglify:{
my_target: {
files: {
'js/script.js': ['_/js/*.js']
}//files
}//target
},//uglify
compass:{
dev:{
options: {
config:'config.rb'
}//options
}//dev
}, //compass
watch: {
options:{ livereload: true },
scripts: {
files: ['_/js/*.js'],
tasks: ['uglify']
},
sass: {
files:['_/sass/*.scss'],
tasks: ['compass:dev']
}//sass
//scripts
// html: {
// files: ['*.html']
// } //for auto refresh browser, need script on html as well.
}//watch
})//initConfig
grunt.registerTask('default','watch') //run gunt and wait for changes
}//exports
and here are my package.json dependencies
"dependencies" : {
"grunt" : "~0.4.5",
"grunt-contrib-watch" : "~0.6.1",
"grunt-contrib-compass" : "~1.0.3",
"grunt-contrib-uglify" : "~0.9.1",
"matchdep" : "~0.3.0"
}
I'm trying to get grunt-browser-sync to inject any css changes into an open browser when a file is updated/changed. But for some reason, I can seem to get it to work and grunt is not giving me any errors to let me know it's not working.
I'm currently using MAMP since it's a Wordpress based project.
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: '_/js/libs/*.js', //input
dest: '_/js/functions.min.js' //output
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
loadPath: require('node-neat').includePaths,
style: 'compressed'
},
files: {
'style.css': 'scss/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'style.css': 'style.css'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : 'style.css'
},
options: {
watchTask: true
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: ["_/js/libs/*.js"],
tasks: ["ugilify"],
},
sass: {
files: ["scss/*.scss"],
tasks: ["sass", "autoprefixer", "browserSync"],
},
php: {
files: ['*.php']
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
// Default task(s).
grunt.registerTask('default', ['uglify', 'sass', 'browserSync', 'watch', 'autoprefixer']);
};
and here's the output when I save/update a file:
Running "watch" task
Waiting...
>> File "scss/global.scss" changed.
Running "sass:dist" (sass) task
File style.css created.
Running "autoprefixer:dist" (autoprefixer) task
File style.css created.
Running "browserSync:dev" (browserSync) task
Done, without errors.
Completed in 1.478s at Wed May 07 2014 18:47:40 GMT-0500 (CDT) - Waiting...
But then I have to physically refresh the browser to see the changes.
I'm not sure if I am missing something within the grunt file or what.
The only version of grunt-browser-sync that works for me with this code is 1.9.1. So, un-install your current version and
npm install grunt-browser-sync#1.9.1 --save-dev
I encountered the same issue and have opened an issue here
Github grunt-browser-sync repo with issues 58
I'd like to create a task to watch all my scss files. And I used "grunt-contrib-watch" and "grunt-contrib-sass" but it doesn't work.
My files and my directories : http://glui.me/?i=pz7vmwu9cfgbzt3/2013-11-28_at_12.46_2x.png/
My error :
MacBook-Pro-of-username:src username:src$ grunt
Running "cssmin:minify" (cssmin) task
File lib/stylesheets/bottom.min.css created.
Running "watch" task
Waiting...Bus error: 10
My grunt code :
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'lib/stylesheets/bottom.css' : 'lib/sass/bottom.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
},
cssmin: {
minify: {
files: [{
'lib/stylesheets/bottom.min.css': ['lib/stylesheets/bottom.css']
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['watch']);
}
There was an issue with node <= 0.10.20 and OSX mavericks. Upgrade node.js to the latest and it should fix the issue. See https://github.com/gruntjs/grunt-contrib-watch/issues/204