Skip to content

Instantly share code, notes, and snippets.

@matthewlein
Last active April 8, 2020 07:54
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matthewlein/7742781 to your computer and use it in GitHub Desktop.
Save matthewlein/7742781 to your computer and use it in GitHub Desktop.
The simplest way to have grunt run a server, watch all the files for changes, and livereload on change. Set up to compile SASS and livereload the css on changes.Using the package.json, all you need to do is npm install and then it should work.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// don't watch node_modules
// used in watch files below
var excludes = [
'!**/node_modules/**'
];
grunt.initConfig({
// add excludes to the grunt object for access later
excludes : excludes,
connect: {
server: {
options: {
port: 9001,
// open a browser
open : true,
// inject livereload.js into the pages
livereload : true
}
}
},
sass: {
compile: {
options: {
// expanded for dev
style: 'expanded',
// compressed for prod
// style: 'compressed',
// if you're using compass
compass : true,
// line numbers of scss in the css for debugging
// lineNumbers : true,
// set up sourcemaps, requires SASS 3.3 and Compass 1.0alpha?
sourcemap : true
},
files: {
// list your css and corresponding scss pages here
// I usually just import all partials into style.scss
'style.css': 'style.scss'
}
}
},
watch : {
options: {
livereload: true
},
// make a subtask for each filetype to selectively run tasks and livereload
html: {
files: [
'**/*.html',
'<%= excludes %>'
],
},
js: {
files: [
'**/*.js',
'<%= excludes %>'
],
tasks: [],
},
// don't livereload sass because we livereload the css
sass: {
options: {
livereload: false
},
files: [
'**/*.scss',
'<%= excludes %>'
],
// compile on save
tasks: ['sass'],
},
css: {
files: [
'**/*.css',
'<%= excludes %>'
],
tasks: []
}
}
});
// Default task(s).
grunt.registerTask('default', [
'sass',
'connect',
'watch'
]);
};
{
"name": "grunt-server",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-sass": "~0.5.1"
}
}
@treecamp
Copy link

treecamp commented Apr 8, 2020

Okay thank you, i have the same issue in a other project. For now i'll just remove the listen on css, and put it on the scss files, that does seems to work. And i'll have a look at webpack's dev server! Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment