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.
Related
I can't figure out what's wrong with my Gruntfile, but the way I understand it is that the sass task will compile abc.scss to abc-exp.css, then, cssmin will take abc-exp.css and generate abc.css. Finally, the watch task will run the css task, which includes sass and cssmin. However, the accurate CSS is only generated the first time I run my tasks, then, on any subsequent changes, nothing is generated.
My project structure is:
_themes/abc/css/abc-exp.css
_themes/abc/css/abc.css
_themes/abc/sass/abc.scss
_themes/abc/sass/partials
_themes/abc/sass/partials/_base.scss
_themes/abc/sass/partials/_variables.scss
_themes/abc/sass/partials/_mixins.scss
Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss'
}
}
},
// autoprefixer: {
// build: {
// src: '_themes/abc/css/abc-exp.css',
// dest: '_themes/abc/css/abc-exp.css'
// }
// },
cssmin: {
build: {
src: '_themes/abc/css/abc-exp.css',
dest: '_themes/abc/css/abc.css'
}
},
// cssbeautifier: {
// files: ['_themes/abc/css/abc-exp.css'],
// options: {
// indent: ' ',
// openbrace: 'end-of-line',
// autosemicolon: false
// }
// },
uglify: {
options: {
},
my_target: {
files: {
'_themes/abc/js/abc-min.js': ['_themes/abc/js/abc.js'],
'_themes/abc/js/abc-bottom-min.js': ['_themes/abc/js/abc-bottom.js']
}
}
},
watch: {
css: {
files: ['_themes/abc/sass/*.scss'],
tasks: ['css']
},
js: {
files: ['_themes/abc/js/abc.js', '_themes/abc/js/abc-bottom.js'],
tasks: ['js']
}
},
browserSync: {
dev: {
bsFiles: {
src: [
'_themes/abc/css/*.css',
'_themes/abc/img/*',
'_themes/abc/js/*.js',
'_themes/abc/**/*.html',
'_themes/abc/**/*.md'
]
},
options: {
watchTask: true,
proxy: 'wifi.dev:8888'
}
}
}
});
// grunt.registerTask('default', ['browserSync', 'watch']);
// grunt.registerTask('css', ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']);
// grunt.registerTask('buildcss', ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']);
// grunt.registerTask('js', ['uglify']);
// grunt.registerTask('buildjs', ['uglify']);
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('css', ['sass', 'cssmin']);
grunt.registerTask('js', ['uglify']);
};
I think you need to replaced build with dist like this:
sass: {
dist: {
files: {
'_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss'
}
}
},
In order to make the task observable by watch you need to change it from css to sass
watch: {
sass: {
files: ['_themes/abc/sass/**/*.{scss,sass}'],
tasks: ['sass']
},
...
},
Grunt doesn't concat and uglify my javascript files when these files are changed and changes are watched for.
If I run grunt concat the js files are concatenated as expected.
If I then run grunt uglify the files are uglified as expected.
However when I simply run grunt the watch task starts and I change a javascript file I get this:
$ grunt
Running "watch" task
Waiting...
>> File "src/js/test.js" changed.
Running "uglify:my_target" (uglify) task
>> Destination dest/js/app.min.js not written because src files were empty.
>> No files created.
Why does it work when I run individual commands but not when changes to the files are being watched for?
Here's my grunt file:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/**/*.js'],
dest: 'dest/js/app.js',
},
},
uglify: {
my_target: {
files: {
'dest/js/app.min.js': ['<%= concat.dist.dest %>']
}
}
},
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'scss',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'scss',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
},
js: {
files: 'src/js/*.js', tasks: [ 'uglify' ]
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['watch', 'compass', 'concat', 'uglify']);
};
I fixed this by changing the watch section. I also changed my_target to build.
My whole grunt file looks like this
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: "\n\n\n",
},
dist: {
src: ['src/**/*.js'],
dest: 'dest/js/app.js',
},
},
uglify: {
build: {
files: {
'dest/js/app.min.js': ['<%= concat.dist.dest %>']
}
}
},
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'scss',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'scss',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
},
scripts: {
files: ['<%= concat.dist.dest %>'],
tasks: ['concat', 'uglify:build'],
options: {
atBegin: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['watch', 'compass', 'concat', 'uglify']);
};
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');
};
Line 'css/???????': 'sass/???????' of the following is what I can not sort out. I have sass-globbing installed due to having multiple directories and levels of SASS files. There are 4 independently compiled sass files in my /sass directory.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: ['sass/{,**/}*.{scss,sass}'],
tasks: ['sass:dist']
},
},
sass: {
options: {
sourceMap: false,
outputStyle: 'expanded'
},
dist: {
files: {
'css/???????': 'sass/???????'
}
}
}
});
grunt.registerTask('default', ['sass:dist', 'watch']);
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};
This should be working;
dist: {
files: {
'css/style.css': 'sass/**/*.scss'
}
}