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'
}
}
Related
I've replaced uglify with babel (and concat), so I'm concat'ing multiple ES6 files into one distribution JS file. I'd LIKE to concat into the dist folder, and have babel transpile and overwrite the file but doing that, babel is unable to use the dist FOLDER, warning:
Couldn't find preset “env” relative to directory
What am I doing wrong?
my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
/*sourceMap: true,
sourceMapStyle: "link"*/
},
dist: {
src: [
"js/file1.js",
"js/file2.js",
"js/file3.js",
"js/file4.js",
"js/file5.js"
],
dest: "js/script.concat.js"
}
},
babel: {
options: {
presets: ["env"],
/*sourceMap: true,*/
minified: true
},
dist: {
files: [{"../dist/js/script.min.js" : "js/script.concat.js"}]
}
},
watch: {
js: {
files: ["js/file1.js", "js/file2.js", "js/file3.js", "js/file4.js", "js/file5.js"],
tasks: ["concat:dist", "babel:dist"]
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
grunt.registerTask('build', ['concat:dist', 'babel:dist']);
};
I am using grunt to compress my LESS files and I have partial success it's either in one line from the setting compress: true or it's not compressed from false and the optimization value set.
What I would like is one per line class without the comments.
.cssitem {stuff;}
.cssitem {stuff;}
.cssitem {stuff;}
My grunt file looks like this:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: {
"css/style.css": "less/style.less" // destination file and source file
}
}
},
watch: {
styles: {
files: ['less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.registerTask('default', ['less', 'watch']);
grunt.loadNpmTasks('grunt-contrib-less');
};
I have been trying this for sometime now. Each time I run grunt in my Terminal I get the following error:
User$: grunt
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
This is my GruntFile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
js: {
files: ['js/*.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch', 'concat']);
};
My basic directory:
/js/jquery.js
/js/angular.js
/js/js.js
/css/settings.scss
/css/slider.scss
/css/css.css
You're missing a comma after your watch:css target (line 23).
Also, please note that the watch task never exits, so you want your default task to run it last:
grunt.registerTask('default', ['concat', 'watch']);
And finally, you should exclude your concatenated js from the list of watched files, to avoid looping.
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js', '!js/js.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: 'css/*.scss',
tasks: ['sass']
},
js: {
files: ['js/*.js', '!js/js.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'watch']);
};
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.
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');
};