I am trying to concatenate a set of .less files into a big .less file, and then have it processed into a big .css file using Grunt's grunt-contrib-less module.
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
concurrent: {
target1: ['concat:lesscss'],
target2: ['less']
},
concat: {
lesscss: {
files: {
'server/static/css/big.less':
['server/static/css/commons-reset-and-core.css',
'server/static/css/base.less',
'server/static/css/ads.less',
'server/static/css/ext.less']
}
}
},
less: {
files: {
'server/static/css/big.css':
'server/static/css/big.less'
}
}
});
grunt.registerTask('default', ['concurrent:target1', 'concurrent:target2']);
};
The big.less is created properly, but the big.css file is not. Yet, Grunt returns
Done, without errors.
What am I doing wrong?
Did you try to wrap it as here:
less: {
development: {
files: {
'server/static/css/big.css': 'server/static/css/big.less'
}
}
},
I think that's required
Related
EDIT: upon further reflection I believe my question is about grunt-contrib-concat rather than sass.
I have a folder of sass files one of which is called colors.scss
//neutrals
$white: #fff;
$light-gray: #eee;
$gray: #9f9f9f;
$slate: #59595A;
$charcoal: #404041;
$gold: #FFD34E;
//define non-neutral colors by use. These are what would change if our app was whitelabeled.
$bright-accent-color: tint(#FF4849, 0%);
$muted-accent-color: $bright-accent-color;
$dark-accent-color: $bright-accent-color;
$note-color: #FFFAD5;
$bright-warning-color: black; // will this be used in new scheme?
$muted-warning-color: tint(#DB9E36, 20%);
$dark-warning-color: $charcoal;
$light-background-color: #f3f6f9;
$primary-nav-color: #172740; // dark blue
$secondary-nav-color: #263D59; // blue
I would like to produce a dozen sets of compiled css files, of which I would swap out the colors.css file for each compiled set. I'm trying to figure out how to incorporate this into my gruntfile without producing seperate tasks for each one. I would like one task that looks in folder called colors that in turn contains all of the colors.scss files and then for each one does a compilation and puts that compiled set of css files in a folder with the same name as the colors.scss file. The problem is I have no idea where to start. I'm using grunt-contrib-sass currently and I'm able to produce one set of files. My gruntfile looks like this:
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/main.css': 'app/css/main.scss'
}
}
},
which works fine for compiling one set, but I want to iterate over the colors files and produce one set for each file found. is this possible? where should I start?
Think I got it. I edited my gruntfile with the following modules: sass, concat, and copy.
In summary, I concat the specific brand scss file to the main scss file and then copy all of the support files to a sass folder in the dist directory. Then I run sass on the concat'd files and output the final css files to the dist css folder.
Heres the configuration:
module.exports = function(grunt) {
'use strict';
var sassFiles = [];
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['concat', 'copy:sass', 'sass']);
grunt.initConfig({
concat: (function(){
var concat = {
options: {
sourceMap: true
}
};
var files = [];
grunt.file.recurse('app/css/brands/', function(abspath, rootdir, subdir, filename){
files.push(filename);
});
sassFiles = files;
files.forEach(file => {
concat[file] = {
src: [
'app/css/brands/'+file,
'app/css/main.scss'
],
dest: 'dist/css/sass/'+file
};
});
return concat;
}()),
sass: {
dist: {
options: {
style: 'expanded'
},
files: (function(){
var fileObject = {};
sassFiles.forEach(file => {
var filename = file.split('.')[0];
fileObject['dist/css/'+filename+'.css'] =
'dist/css/sass/'+file;
});
return fileObject;
}())
}
},
copy: {
sass: {
files: [
{ expand: true, cwd: 'app/css', src: '**', dest: 'dist/css/sass/' }
]
}
}
});
};
I'm working on a Node.js website and I'm using Grunt to concat and minify my CSS and JS files. However, after running the grunt command I'm getting the error message:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
Here's my grunt file:
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
If anything I would have thought jQuery would be the one that's getting concatenated multiple times but it's not. Any suggestions what I might be doing wrong?
EDIT: Here's my upgraded grunt file with all 3rd party libraries listed in the concat.src.
/// <binding BeforeBuild='default' />
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: [
"public/lib/js/jquery/jquery.js",
"public/lib/js/bootstrap/bootstrap.js",
"public/lib/js/fullpage.js/jquery.fullpage.js",
"public/lib/js/jquery-easing-original/jquery.easing.js",
"public/lib/js/slimscroll/jquery.slimscroll.js",
"public/lib/js/wow/wow.js",
"public/js/cts.js"
],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerTask("combine", [ "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
Your issue seems to be in concate.js.src
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"]
This will have your files added multiple times as there might some files common among the paths mentioned in src.
You should probably move all your vendor files like jquery out of the public directory and put in a different one, say vendor.
Your src should then look something like
src: ["vendor/**/*.js", "public/**/*.js"]
As you see now there are no common files among these two paths.
Also its a good practice to always have 3rd party code outside your app directory as a sibling folder and not inside it.
EDIT:
Ah! I see whats your problem. You want to have jquery first among the other vendor files.
public/lib/**/jquery.js and public/lib/**/*.js together might be causing files added twice.
Try this
src: ["public/lib/jquery/jquery.js", "public/lib/**/*.js", "!public/lib/jquery/jquery.js", public/js/cts.js"]
Put the full path of jquery first public/lib/jquery/jquery.js and then the !public/lib/jquery/jquery.js should prevent jquery being added again as part of public/lib/**/*.js
Got the above pattern from here http://gruntjs.com/configuring-tasks#globbing-patterns
If this still doesn't work, then another option is to add all paths in the src array individually. If you have a requirejs config just copy the paths from there, as jquery might not be the only dependency issue you face in future.
I have the following grunt file:
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'css/output.css': ['css/one.css', 'css/two.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);
};
just started using grunt.js today and just had a look at the documentation and the examples , i am using the following plugin:
CSS-CONTRIB-MIN
Now, My files get minifined into one , but what i really want is for them to only be combined into one and not minified. how do i achieve that ?
You should use the grunt-contrib-concat plugin for this task. Take a closer look at the GitHub documentation on how to configure the task (e.g. separator, banner, ...)
grunt.initConfig({
concat: {
dist: {
src: ['css/one.css', 'css/two.css'],
dest: 'css/output.css',
},
},
});
Goal
My goal is to concatenate all my css,js files and minify all of them.
I can minify my concat.js, but I'm struggling trying to minify my concat.css.
Gruntfile.js
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
concat: {
js: {
src: [
'js/bootstrap.min.js',
'js/jquery-1.10.2.min.js',
'js/jquery.easypiechart.min.js',
'js/jquery.isotope.min.js',
'js/jquery.magnific-popup.min.js',
'js/waypoints.min.js',
'js/respond.min.js',
'js/jquery.vegas.min.js',
'js/modernizr-2.6.2.min.js',
'js/jquery.nav.js',
'js/html5shiv.js',
'js/jquery.scrollTo.js',
'js/jquery.sticky.js',
'js/jquery.validate.js',
'js/main.js',
],
dest: 'dist/concat.js'
},
css: {
src: [
'css/magnific-popup.css',
'css/main.css',
'css/xl.css',
'css/lg.css',
'css/md.css',
'css/sm.css',
'css/xs.css',
'css/print.css',
'css/bootstrap.min.css',
'css/font-awesome.min.css',
],
dest: 'dist/concat.css'
}
},
watch: {
js: {
files: ['js/*.js'],
task: ['concat:js']
},
css: {
files: ['css/*.css'],
task: ['concat:css']
}
},
uglify: {
js: {
files: {
'dist/minified.js': ['dist/concat.js']
}
},
css: {
files: {
'dist/minified.css': ['dist/concat.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'uglify']);
};
Result
I concatenate all my css and js files succesfully, and they're generated at :
dist/concat.js
dist/concat.css
Then, I can also minify my concat.js with no problem, but I'm struggling trying to minify my concat.css.
I kept getting this error in the bottom of my Terminal :
Running "uglify:css" (uglify) task
{ message: 'Unexpected token: punc (.)',
filename: 'concat.css',
line: 4,
and line4 is just the beginning of my class : .mfp-bg {
Can someone please give me a little push here ?
Also, should I perform minify after concatenation or the other way around ?
Is there a better way to do this ?
uglify is for minimising JavaScript only, not CSS.
If you want to minimise CSS you can use the cssmin task for Grunt instead.
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']);
};