Added "grunt-contrib-livereload": "^0.1.2" to sass compile grunt config. Yes, it's reloading, but the whole DOM. Magento 2 native config reloader reloading just the styles, not page reload. How I can setup grunt in this way?
Thanks
module.exports = function (grunt) {
const sass = require('node-sass');
const timer = require('grunt-timer');
require('time-grunt')(grunt);
require('load-grunt-tasks')(grunt);
timer.init(grunt, { deferLogs: true, friendlyTime: false, color: "blue" });
grunt.initConfig({
notify_hooks: {
options: {
enable: true,
title: 'Task Completed',
max_jshint_notifications: 5,
},
uncss: {
options: {
title: 'Task Completeddd',
message: "Error occured",
},
},
},
sass: {
dist: {
options: {
implementation: sass,
sourceMap: true,
message: "Less task complete"
},
files: {
'../../../../../pub/static/frontend/Laf/v1/en_US/css/quickview.css': 'styles/quickview.scss',
'../../../../../pub/static/frontend/Laf/v1/en_US/css/locations.css': 'styles/locations.scss',
}
}
},
watch: {
files: ['styles/*.scss', 'Magento_Cms/styles/*.scss'],
tasks: ['sass'],
options: {
livereload: true,
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-notify');
grunt.task.run('notify_hooks');
grunt.registerTask('default', ['sass', 'notify', 'livereload']);
};
Related
I have installed bootstrap using sass, however my scss files are not compiling to the css folder.
I was able to install the bootstrap, using bower.
This is my gruntfile.js
/*jslint node: true */
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
loadPath: ['./bower_components/bootstrap-sass/assets/stylesheets']
},
dist: {
options: {
outputStyle: 'expanded',
sourceMap: false
},
files: {
'css/bootstrap.css' : 'stylesheets/_bootstrap.scss',
}
}
}, // sass
compass: {
dev: {
options: {
config: 'config.rb'
}
} // dev
}, //compass
watch: {
options: {
livereload: true,
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at ' + (new Date()).toString());
grunt.log.writeln('Waiting for more changes...');
} //date format function
}, //options
scripts: {
files: ['*.js']
}, // scripts
//Live Reload of SASS
sass: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['sass']
}, //sass
css: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['compass']
},
html: {
files: ['*.html']
}
}, //watch
postcss: {
options: {
processors: [
require('autoprefixer-core')({
browsers: 'last 2 versions'
})
]
}
}, //post css
jshint: {
options: {
reporter: require('jshint-stylish')
},
target: ['*.js', 'js/*.js']
} //jshint
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build', 'watch', 'compass', 'jshint']);
}
I would like to know, what step I am missing, because I have followed the directory paths correctly. My config.rb file, I have changed the sass directory to stylesheets.
When I run, sudo grunt, no errors are found but the stylesheet is not compiling.
In SCSS, files starting with _ (underscore) are typically ignored. See: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials
This also applies to grunt-sass.
so this is my gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
folders: {
'dist': 'dist',
'app': 'app'
},
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish'),
ignores: [
'Grunfile.js',
'app/assets/lib/**/*'
]
},
all: [
'app/**/**/*.js',
]
},
// configure uglify to minify js files -------------------------------------
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/app.min.js': 'app/js/main.js'
}
}
},
// compile sass stylesheets to css -----------------------------------------
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'app/assets/css/main.css': 'app/assets/sass/main.sass',
'app/assets/css/variables.css': 'app/assets/sass/variables.sass',
'app/assets/css/typography.css': 'app/assets/sass/typography.sass',
'app/assets/css/reset.css': 'app/assets/sass/reset.sass'
}
}
},
// starting an express server ----------------------------------------------
express: {
dev: {
options: {
port: 9000,
hostname: '0.0.0.0',
bases: ['app'],
livereload: true
}
}
},
// configure watch to auto update ------------------------------------------
watch: {
sass: {
files: ['**/*.{scss,sass}'],
tasks: ['sass'],
options: {
livereload: true
}
},
reload: {
options: {
livereload: true
},
files: ['app/**/*'],
},
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint', 'uglify', 'sass', 'express', 'watch:reload']);
};
My problem:
When I start grunt, it checks for my sass files and automatically convert it to css files. Check. But if i start grunt and then edit a sass file, it recognizes the changes but dont convert the sass to css after it again.
Does anybody see the mistake?
Cheers!
Found the "problem": Had to register the task 'watch' instead of 'watch:reload'!
Cheers
I have the following Gruntfile.js. My bootstrap.less file has tons of imports which includes all the plugins' CSS codes as well. Therefore, the bootstrap takes from 5-20 seconds to compile whenever I make a change to any less files. Is there any way I can have two different less tasks, so whenever there's a change in any of the bootstrap's imported files, that only runs the less task associated to the bootstrap and the other task that would run only if the main.less is changed.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
paths: ["../css"]
},
files: {
"../css/bootstrap.css": "../less/bootstrap.less",
"../css/main.css": "../less/main.less"
}
}
},
watch: {
options: {
livereload: true
},
less: {
options: {
livereload: false,
spawn: false
},
files: ['../less/*.less', '../less/responsive/*.less'],
tasks: ['less']
}, css: {
files: ['../css/main.css'],
tasks: []
}
}
});
// Less
grunt.loadNpmTasks('grunt-contrib-less');
// Watch
grunt.loadNpmTasks('grunt-contrib-watch');
};
try running this code :
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
paths: ["../css"]
},
files: {
"../css/main.css": "../less/main.less"
}
},
bootstrapBuild : {
options : {
paths: ['../css']
},
files : {
"../css/bootstrap.css": "../less/bootstrap.less",
}
}
},
watch: {
options: {
livereload: true
},
mainCSS: {
options: {
livereload: false,
spawn: false
},
files: ['../less/*.less', '../less/responsive/*.less', '!../less/bootstrap.less'],
tasks: ['less: development']
},
bootstrapBuild : {
files: ['../less/bootstrap.less'],
tasks: ['less:bootstrapBuild']
},
css: {
files: ['../css/main.css'],
tasks: []
}
}
});
// Less
grunt.loadNpmTasks('grunt-contrib-less');
// Watch
grunt.loadNpmTasks('grunt-contrib-watch');
};
my grunt watch task is running, but no changes in .less files are recognized:
here is my grunt file.js:
module.exports = function(grunt) {
grunt.initConfig({
// running `grunt less` will compile once
less: {
development: {
options: {
compress: false,
yuicompress: false,
},
files: {
"public/css/styles.css": "src/less/styles.less"
}
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
},
files: {
"public/css/styles.min.css": "src/less/styles.less"
}
}
},
// running `grunt watch` will watch for changes
watch: {
files: "src/less/*.*/*.less",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
Can someone give me a hint, please. Manual trigger of grunt less works fine.
I am trying to set up a workflow using grunt, to help with development of my jekyll site.
Found this great TUT which basically goes through how to install it in your workflow.
However, I get these errors when I run the 'grunt' command.
**[BS] Warning: Multiple External IP addresses found**
**[BS] If you have problems, you may need to manually set the 'host' option**
**[BS] Server running. Use this URL: http://192.168.1.5:3005**
[BS] Serving files from: /Users/antonioortiz/Sites/newaortiz/_site
**[BS] Not watching any files...**
[BS] Browser Connected! (Chrome, version: 33.0.1750.146)
Obviously the ones I bolded are most glaring, as NO css is being generated in my 'assets/css
Below is my Gruntfile. Thank you in advance.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browser-sync');
// All configuration goes here
grunt.initConfig({
jekyll: {
build: {
dest: '_site'
}
},
sass: {
dist: {
files: {
'assets/css/*.css': 'assets/sass/*.scss'
}
}
},
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} // dist
}, //compass
watch: {
sass: {
files: 'assets/**/*.scss',
tasks: ['sass']
},
jekyll: {
files: ['_layouts/*.html', '_includes/*.md', 'assets/css/*.css'],
tasks: ['jekyll']
}
},
compass: {
files: ['assets/sass/*.scss'],
tasks: ['compass:dev']
}, // sass
browser_sync: {
files: {
src: ['_site/assets/css/*.css']
},
options: {
watchTask: true,
ghostMode: {
clicks: true,
scroll: true,
links: true,
forms: true
},
server: {
baseDir: '_site'
}
}
}
});
// Custom tasks
grunt.registerTask('build', ['sass', 'jekyll']);
grunt.registerTask('default', ['build', 'browser_sync', 'watch']);
};