Watch task doesn't compile sass files - javascript

So i am trying to set up my first grunt application, but i am struggling with the watch task.
When I run the task watch looks like it is working when i change my sass files, but the css files are not updated, so it looks like it is not compiling.
I am wondering if i need to install something else, for me this is all new... and i am not sure if I understand, because it looks very simple but I just cant make it work.
So here is my code
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
options: {
livereload: true
},
files:['sass/**/*.scss'],
task:['sass']
},
css: {
files: ['css/*.css'],
tasks: []
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: 'sass',
src: ['*.scss', '*.sass'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};

I think you want your livereload to be on the css files instead of scss. As it is the compiled file that you want to be reloaded and not the preprocessed (scss) file.
Example
watch:{
sass:{
files:['sass/**/*.scss'],
task:['sass']
},
css: {
options: {
livereload: true
},
files: ['css/*.css']
}
}

OWWWWW....
I just found the problem... it should have been "tasks" not "task", i wasted sooo much time, on finding this little thingy!

Related

grunt sass: compile only changed files

I have the following folder structure:
+ web
+ component
- component.js
- component.scss
- component.css
+ another
- another.js
- another.scss
- another.css
As you can see I compile every css into his component folder.
This is my configuration:
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: './',
src: ['web/**/*.scss'],
dest: './',
ext: '.css'
}]
}
},
watch: {
files: ["web/**/*.scss"],
tasks: ['sass'],
options : { spawn: false }
}
});
Everything works fine, but the problem is that every time a scss file is changed, it compiles ALL the scss in my web folder.
I want to compile only the changed scss.
I also tried installing grunt-newer and changing the watch configuration in:
watch: {
files: ["web/**/*.scss"],
tasks: ['newer:sass'],
options : { spawn: false }
}
But it doesn't compile anything now.
ps: I would like to avoid mapping every single file in the sass configuration (scss -> css) since the rule is the same for all the files (same name, same folder), and because I have tons of them.
ok, i was close.. i'll post the answer as well, it may help someone.
i had to remove options : { spawn: false }, so my config file now is like this:
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: './',
src: ['web/**/*.scss'],
dest: './',
ext: '.css'
}]
}
},
watch: {
files: ["web/**/*.scss"],
tasks: ['newer:sass']
}
});

Uglify not working with Grunt Watch

I have a pretty basic setup with sass, watch and uglify but for some reason I can't get watch to detect when a js file is saved. It works fine for SCSS/CSS (compiles and reloads.) If I run 'grunt uglify' it bundles my JS files, and if watch is running (in another console instance) it will detect it and trigger the reload.
I've tried lots of combinations and I have a feeling it's something really dumb I'm doing/not doing but I'm just not seeing it.
my gruntfile.js:
module.exports = function(grunt) {
grunt.registerTask('default', ['sass', 'uglify']);
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: { 'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/main.css': 'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/main.scss' }
}
},
uglify: {
my_target: {
files: {
'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/js/site.js': [
'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/lib/jquery/dist/jquery.js',
'fivesixtwo.com/src/FiveSixTwo.com/wwwroot/lib/*.js'
]
}
}
},
watch: {
options: {
livereload: 35729,
},
html: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/Views/*.cshtml'],
},
sass: {
options: {
livereload: false
},
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/*.scss'],
tasks: ['sass']
},
css: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/css/main.css'],
tasks: []
},
scripts: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/js/site.js'],
tasks: ['uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
};
Look at your watch config:
scripts: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/js/site.js'],
tasks: ['uglify']
}
You are only watching for a single js files changes called site.js. To watch all your sources use this config:
scripts: {
files: ['fivesixtwo.com/src/FiveSixTwo.com/wwwroot/lib/*.js'],
tasks: ['uglify']
}
Use the same pattern as in the uglify config. I assumed you are not going to modify jquery itself.

Grunt LiveReload not showing

i have a noob question about livereload with Grunt. I have the watch task configured with livereload: true
I added the tag at the bottom of the page and when i point the browser to localhost:port_number_i_can't_remember it shows a page with the .js server i guess...
how can i use livereload to reload the html i'm working on. where do i have to point the browser? I'm using sublime3 and added the livereload package. I also use brackets, been on/off between the two.
The grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
includePaths: ['sass/**/*.scss']
},
dist: {
options: {
outputStyle: 'compressed',
sourceMap: true
},
files: {
'css/materialize.css': 'sass/materialize.scss'
}
}
},
watch: {
grunt: {
options: {
livereload: true
},
files: [
'css/*.css',
'*.html'
]
},
sass: {
files: 'sass/**/*.scss',
tasks: ['sass']
},
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build', 'watch']);
}
What am i doing wrong here guys?
There are several ways to enable it, and they're listed in the official wiki.
The easiest is the first one, include
<script src="//localhost:35729/livereload.js"></script>
before </body> in your HTML page.
If you have any question on one of these methods, please update the question accordingly

Using both Compass and Autoprefixer in Grunt

Curious about whether there’s a way to use both Autoprefixer and Compass in Grunt without having to specify a different output path for each task.
I currently have my .scss files in a folder named source. The compass task compiles these into a folder named build. I want to then run Autoprefixer without having to specify another different output path (i.e. still be in the build directory).
Is it not possible to run Autoprefixer on a compass compiled CSS file without specifying a different output path? Is it possible to run both at the same time perhaps?
Here’s the section of my gruntfile it relates to if it’s of any help. What I run in terminal is grunt watch:
compass: {
options: {
sassDir: 'style/source',
cssDir: 'style/build',
outputStyle: 'expanded',
}
},
watch: {
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass'],
options: {
spawn: false,
}
}
},
Refs:
https://github.com/nDmitry/grunt-autoprefixer
https://github.com/gruntjs/grunt-contrib-compass
If you do not specify an output location for Autoprefixer, it will just use the input location and overwrite the files. Here’s the updated section of the gruntfile if it’s of help to anyone:
autoprefixer: {
css: {
src: 'style/build/**.css',
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass', 'autoprefixer:css'],
options: {
spawn: false,
}
}
}
You may also want to add map: true to the autoprefixer call.
Here is a working copy for your goal :
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
autoprefixer: {
css: {
src: 'css/*.css',
options: {
map: true
}
}
},
compass: {
css: {
options: {
config: 'config.rb'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass:css', 'autoprefixer:css'],
options: {
interrupt: true
}
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};

Grunt.js & uglify is appending uglified code to file instead of rewriting it

I'm working on some automation tasks and I noticed that grunt.js and uglify module are not rewriting the minified file. They're appending a new version of code everytime I start grunt tasks.
module.exports = function(grunt) {
grunt.initConfig({
uglify : {
build : {
src : ['**/*.js', '!*.min.js'],
cwd : 'js/app/modules/',
dest : 'js/app/modules/',
expand : true,
ext : '.main.min.js',
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
What can I do to avoid it? I just want the newest version of code in the file.
I had the same problem with the following configuration for all files in subfolders to js/ (e.g. js/lib/*.js) :
build: {
expand: true,
cwd: 'js/',
src: ['**/*.js','!*.min.js'],
dest: 'js/',
ext: '.min.js',
}
You have to restrict more files, because if a file matches the src-option the content will be appended and not replaced - because it is "locked" i guess:
src: ['**/*.js','!**/*.min.js']
That should fix your problem.
Thanks SpazzMarticus! I user grunt-newer to run uglify with newer files only.
You can try this:
grunt.initConfig({
uglify: {
options: {
},
build: {
files: [{
expand: true,
cwd: 'public/js',
src: ['**/*.js','!**/*.min.js'],
dest: 'public/js',
ext: '.min.js'
}]
}
},
watch: {
options: {
livereload: true,
nospawn: true
},
scripts:{
files: ['public/js/**/*.js'],
tasks: ['newer:uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('yt', ['watch']);

Categories