grunt cssmin different target files for style.min.css and above-the-fold.min.css - node.js

In an older version of cssmin it was possible to create to different target files. I minified a style.min.css and an above-the-fold.min.css. Now I updated to a newer version of nodejs, npm, grunt and cssmin and it is not possible to minify to different outputfiles anymore. Since the update grunt only minifies the second task and skip the first task. Do you have a hint for me to minify both tasks?
cssmin: {
options: {
mergeIntoShorthands: false,
roundingPrecision: -1
},
target: {
files: {
'data/style.min.css': ['a.css', 'b.css', 'c.css', 'd.css', 'e.css', 'f.css', 'g.css']
}
}
},
penthouse: {
extract : {
outfile : 'data/above-the-fold.temp.css',
css : './data/style.min.css',
url : 'http://localhost/',
width : 1280,
height : 500
},
},
cssmin: {
options: {
mergeIntoShorthands: false,
roundingPrecision: -1
},
target: {
files: {
'data/above-the-fold.min.css': ['data/above-the-fold.temp.css']
}
}
}

grunt-contrib-cssmin will allow multiple Targets to be defined in a single Task. For example:
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
// ...
cssmin: { // <-- cssmin Task
options: {
mergeIntoShorthands: false,
roundingPrecision: -1
},
targetA: { // <-- First target
files: {
'data/style.min.css': ['a.css', 'b.css', 'c.css', 'd.css', 'e.css', 'f.css', 'g.css']
}
},
targetB: { // <-- Second target
files: {
'data/above-the-fold.min.css': ['data/above-the-fold.temp.css']
}
}
}
// ...
});
// ...
};
Each Target name should be unique within the cssmin Task. For example: targetA and targetB
As you've included the penthouse Task in your post, I guess that you need to run that after generating the style.min.css file, and before generating the above-the-fold.min.css. To do this you can register your Tasks as follows:
grunt.registerTask('default', ['cssmin:targetA', 'penthouse', 'cssmin:targetB',]);
Note: The use of the semi-colon notation, namely cssmin:targetA and cssmin:targetB. This simply ensures that targetA of the cssmin Task is run before the penthouse Task. Subsequently, (when the penthouse Task completes), targetB of the cssmin Task is run.

Related

Unable to use helper classes within unit tests of a bundled aurelia app. RequireJS Configuration?

Summary
Using the aurelia cli and the default tasks that are included, I am unable to leverage helper classes that are located within the test folder in my unit tests.
Details
Starting with the sample app created with au new, I have a contrived helper class located within 'test/util/helper.ts':
export class Helper {
Property : string;
}
This class is imported by the test/unit/app.spec.ts file:
import {App} from '../../src/app';
import {Helper} from "../util/helper";
describe('the app', () => {
it('says hello', () => {
let h = new Helper();
h.Property = "Testing";
expect(h.Property).toBe("Testing");
expect(new App().message).toBe('Hello World!');
});
});
Approach #1 - Bundling
I have modified the aurelia.json file in a few places:
Change the source of the typescript compiler to include files under the test folder
"transpiler": {
"id": "typescript",
"displayName": "TypeScript",
"fileExtension": ".ts",
"dtsSource": [
"./typings/**/*.d.ts",
"./custom_typings/**/*.d.ts"
],
"source": ["src\\**\\*.ts","test\\**\\*.ts"]
},
Modify the app-bundle to exclude any file from the test folder
{
"name": "app-bundle.js",
"source": {
"include": [
"[**/*.js]",
"**/*.{css,html}"
],
"exclude": [
"**/test/**/*"
]
}
},
Add a new bundle (test-util-bundle), which includes files from the test\util folder and excludes files within the src and test/unit folders
{
"name": "test-util-bundle.js",
"source": {
"include": [
"[**/*.js]"
],
"exclude": [
"**/src/**/*",
"**/test/unit/**/*"
]
}
},
After bundling the app with 'au build', I have three bundles (app/vendor/test-util), with the test-util-bundle.js bundle defining the helper class like this:
define('../test/util/helper',["require", "exports"], function (require, exports) {
"use strict";
var Helper = (function () {
function Helper() {
}
return Helper;
}());
exports.Helper = Helper;
});
I suspect this is the root of the problem, but not that familiar with RequireJS.
When I do run 'au test' the test fails with the following error:
11 10 2016 12:05:24.606:DEBUG [middleware:source-files]: Fetching C:/git/aurelia-cli-testing/test/test/util/helper
11 10 2016 12:05:24.608:WARN [web-server]: 404: /base/test/test/util/helper
Chrome 53.0.2785 (Windows 7 0.0.0) ERROR
Uncaught Error: Script error for "C:/git/aurelia-cli-testing/test/test/util/helper", needed by: C:/git/aurelia-cli-testing/test/util/helper
http://requirejs.org/docs/errors.html#scripterror
at C:/git/aurelia-cli-testing/scripts/vendor-bundle.js:3763
Note:
This works fine if I move the helper.ts file under the src tree (as done here). This is all available here if you would like to see the behavior.
Approach #2 - Without Bundling of utility class
Modify karma.conf.js
let testSrc = [
{ pattern: project.unitTestRunner.source, included: false },
{ pattern: "test/util/**/*.ts", included: false },
'test/aurelia-karma.js'
];
...
preprocessors: {
[project.unitTestRunner.source]: [project.transpiler.id],
["test/util/**/*.ts"]: [project.transpiler.id]
},
With this modification (no bundling of the utility class) karma produces the following error:
18 10 2016 16:56:59.151:DEBUG [middleware:source-files]: Fetching C:/git/aurelia-cli-testing/test/util/helper
18 10 2016 16:56:59.152:WARN [web-server]: 404: /base/test/util/helper
Chrome 53.0.2785 (Windows 7 0.0.0) ERROR
Uncaught Error: Script error for "C:/git/aurelia-cli-testing/test/util/helper", needed by: C:/git/aurelia-cli-testing/test/unit/app.spec.js
http://requirejs.org/docs/errors.html#scripterror
at C:/git/aurelia-cli-testing/scripts/vendor-bundle.js:3763
Thanks for reading, any help would be greatly appreciated!
With the help of an Aurelia team member, a small modification to the aurelia-karma.js file that is distributed with the aurelia cli fixes the issue:
The normalizePath function should be modified to append '.js' where applicable:
function normalizePath(path) {
var normalized = []
var parts = path
.split('?')[0] // cut off GET params, used by noext requirejs plugin
.split('/')
for (var i = 0; i < parts.length; i++) {
if (parts[i] === '.') {
continue
}
if (parts[i] === '..' && normalized.length && normalized[normalized.length - 1] !== '..') {
normalized.pop()
continue
}
normalized.push(parts[i])
}
//Use case of testing source code. RequireJS doesn't add .js extension to files asked via sibling selector
//If normalized path doesn't include some type of extension, add the .js to it
if(normalized.length > 0 && normalized[normalized.length-1].indexOf('.') < 0){
normalized[normalized.length-1] = normalized[normalized.length-1] + '.js';
}
return normalized.join('/')
}
I had to do the following:
1. update the aurelia-project/aurelia.json file. add this
"unitTestRunnerUtils": {
"id": "karmaUtils",
"displayName": "Karma",
"source": "test\\utils\\**\\*.js" },
Then in the karma.conf.js file updated these two places.
let testSrc = [ { pattern: project.unitTestRunner.source, included:
false }, { pattern: project.unitTestRunnerUtils.source, included:
false}, 'test/aurelia-karma.js' ];
and
preprocessors: {
[project.unitTestRunner.source]: [project.transpiler.id],
[project.unitTestRunnerUtils.source]: [project.transpiler.id]
},
And then it worked...
Here is the example project on github.
https://github.com/duranmg/demo-aurelia-testing

Grunt Sass - Compile all Sass files into CSS with the same name

I used Compass and it compiles all Sass files into CSS with the same name. For example my-style.scss will become my-style.css.
All tutorials about grunt-sass that I found mapped the file name one by one, manually like:
sass: {
dist: {
options: { style: 'compressed' },
files: { 'css/my-style.css': 'sass/my-style.scss' }
}
}
Is there a way to make it more flexible? So I don't need to change the Gruntfile whenever I have new Sass file.
Thanks
Try this format for specifying your source and destination files:
sass: {
src: {
files: [{
expand: true,
cwd: 'source/styles/',
src: ['**/*.scss'],
dest: 'destination/styles/',
ext: '.css'
}]
}
}
This reads as "take all files matching *.scss in source/styles/ and its subfolders, process them and put them into destination/styles/, changing extension to .css. See also http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
You should use the universal notation:
sass: {
dist: {
options: { style: 'compressed' },
files: { 'css/*/**.css': 'sass/my-style.scss' }
}
}
In this case, the Grunt will go for all *.css files inside the css folder (including subfolders) regardless of the file name, and compile to my-style.scss

Grunt: How do I run seperate processes for CSS (sass, concat, minify) and JS (concat, minify)

I'm looking at the grunt watch documentation but I can see how to run a separate process for my javascript files. Below is what I have for CSS:
GruntFile.js
module.exports = function(grunt) {
grunt.initConfig({
// running `grunt sass` will compile once
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'./public/css/sass_styles.css': './src/sass/sass_styles.scss' // 'destination': 'source'
}
}
},
// bring in additonal files that are not part of the sass styles set
concat: {
dist: {
src: [
'public/css/datepicker.css',
'public/css/jquery.tagsinput.css',
'public/css/sass_styles.css',
'application/themes/japantravel/style.css'
],
dest: 'public/css/all.css',
},
},
// running `grunt cssmin` will minify code to *.min.css file(s)
cssmin: {
minify: {
expand: true,
cwd: "public/css/",
src: ["all.css", "!*.min.css"],
dest: "public/css/",
ext: ".min.css"
}
},
// running `grunt watch` will watch for changes
watch: {
files: ["./src/sass/*.scss", "./src/sass/partials/*.scss"],
tasks: ["sass", "concat", "cssmin"]
}
});
// load tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
};
As you can see I have tasks for CSS ["sass", "concat", "cssmin"], but I want to do separate tasks for separate files (js) - concat and minify - and listen for changes (watch). Can someone point me in the correct direction, I'm not really sure what I should be searching for. Is this something that watch can handle, or is there another plugin? I'm a little new to grunt so still trying to figure out how to use it. Thanks
You can use 'grunt-concurrent' for that, you can define multiple tasks with it. In combination with watch sets you will have the proper solution. https://github.com/sindresorhus/grunt-concurrent
# to install:
npm install grunt-concurrent --save-dev
And this will be your adjusted function then.
Remember, you still have to set some uglify and jshint properties! But I believe that's not the issue here.
module.exports = function(grunt) {
grunt.initConfig({
/* .. */
// running `grunt watch` will watch for changes
watch: {
// Use 'sets' like this, just make up a name for it:
watchCss: {
files: ["./src/sass/*.scss", "./src/sass/partials/*.scss"], // Directory to look for changes
tasks: ["concurrent:taskCss"] // Tasks you want to run when CSS changes
},
watchJs: {
files: ["./src/js/**/*.js"], // Directory to look for changes
tasks: ["concurrent:taskJs"] // Tasks you want to run when JS changes
}
},
concurrent: {
taskCss: ["sass", "concat", "cssmin"], // define the CSS tasks here
taskJs: ["jshint", "concat", "uglify"] // define the JS tasks here
},
});
// load tasks
grunt.loadNpmTasks("grunt-contrib-sass");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks('grunt-contrib-jshint'); // Added
grunt.loadNpmTasks('grunt-contrib-uglify'); // Added
grunt.loadNpmTasks("grunt-concurrent"); // Added
// register tasks (note: you can execute sets from concurrent)
grunt.registerTask('default', ["concurrent:taskCss", "concurrent:taskJs"]);
grunt.registerTask('css', ["concurrent:taskCss"]);
grunt.registerTask('js', ["concurrent:taskJs"]);
};
To watch for changes:
grunt watch
# if a css file is changed, only the css tasks are performed
You can also execute a task from the prompt directly, for example:
grunt js
# This will only execute the registered task 'js'
# In this case that task points to 'concurrent:taskJs' wich will run jshint, concat and uglify
To install uglify and jshint:
https://github.com/gruntjs/grunt-contrib-uglify
https://github.com/gruntjs/grunt-contrib-jshint
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-jshint --save-dev

More than 1 requirejs task in grunt for different optimization options

I use r.js to cobble together all the js code in my SPA into 1 file. I use grunt's `grunt-contrib-requirejs' task for this, with the following:
requirejs: {
compile: {
options: {
name: 'app',
out: 'build/js/app.js',
baseUrl: 'app',
mainConfigFile: 'config/main.js',
preserveLicenseComments: true,
optimize: "none"
}
}
}
I also use a build task that zips the build folder into a zip file for me to send to our company's change management folks.
I would like to have two requirejs tasks - one that uglifies (for sending to CM) and one that doesn't (during development). Is this possible? I tried creating a new task with a different name and grunt yelled at me... should be simple. Is this possible? Are there any reasons not to do this?
Thanks in advance!
Actually it is very simple:
requirejs: {
compile: {
options: {
...
optimize: "none"
}
},
compileForProduction: {
options: {
...
optimize: "uglify2"
}
}
}
(options are same as yours, with any diffs between the two that are required, e.g. optimize)
Run it with:
grunt requirejs:compileForProduction
or in Gruntfile.js:
grunt.registerTask("prod", ["requirejs:compileForProduction"]);
and:
grunt prod

Grunt watch: compile only one file not all

I have grunt setup to compile all of my coffee files into javascript and maintain all folder structures using dynamic_mappings which works great.
coffee: {
dynamic_mappings: {
files: [{
expand: true,
cwd: 'assets/scripts/src/',
src: '**/*.coffee',
dest: 'assets/scripts/dest/',
ext: '.js'
}]
}
}
What I would like to do is then use watch to compile any changed coffee file and still maintain folder structure. This works using the above task with this watch task:
watch: {
coffeescript: {
files: 'assets/scripts/src/**/*.coffee',
tasks: ['coffee:dynamic_mappings']
}
}
The problem is that when one file changes it compiles the entire directory of coffee into Javascript again, it would be great if it would only compile the single coffee file that was changed into Javascript. Is this naturally possible in Grunt or is this a custom feature. The key here is it must maintain the folder structure otherwise it would be easy.
We have custom watch scripts at work and I'm trying to sell them on Grunt but will need this feature to do it.
You can use something like the following Gruntfile. Whenever a CoffeeScript file changes, it updates the configuration for coffee:dynamic_mappings to only use the modified file as the src.
This example is a slightly modified version of the example in the grunt-contrib-watch readme.
Hope it helps!
var path = require("path");
var srcDir = 'assets/scripts/src/';
var destDir = 'assets/scripts/dest/';
module.exports = function( grunt ) {
grunt.initConfig( {
coffee: {
dynamic_mappings: {
files: [{
expand: true,
cwd: srcDir,
src: '**/*.coffee',
dest: destDir,
ext: '.js'
}]
}
},
watch : {
coffeescript : {
files: 'assets/scripts/src/**/*.coffee',
tasks: "coffee:dynamic_mappings",
options: {
spawn: false, //important so that the task runs in the same context
}
}
}
} );
grunt.event.on('watch', function(action, filepath, target) {
var coffeeConfig = grunt.config( "coffee" );
// Update the files.src to be the path to the modified file (relative to srcDir).
coffeeConfig.dynamic_mappings.files[0].src = path.relative(srcDir, filepath);
grunt.config("coffee", coffeeConfig);
} );
grunt.loadNpmTasks("grunt-contrib-coffee");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask("default", [ "coffee:dynamic_mappings", "watch:coffeescript"]);
};
found a solution from an answer to a similar question https://stackoverflow.com/a/19722900/1351350
short answer: try https://github.com/tschaub/grunt-newer

Resources