Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change handlebars and css transport style #75

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 17 additions & 1 deletion Gruntfile.js
Expand Up @@ -10,6 +10,8 @@
module.exports = function(grunt) {

var style = require('./').style.init(grunt);
var cssParser = style.cssParser;
// now as default
var css2jsParser = style.css2jsParser;
var jsParser = require('./').script.init(grunt).jsParser;

Expand Down Expand Up @@ -125,6 +127,9 @@ module.exports = function(grunt) {
options: {
alias: {
'button': 'alice/button/1.0.0/button.css'
},
parsers: {
'.css': [cssParser]
}
},
files: [{
Expand All @@ -147,6 +152,11 @@ module.exports = function(grunt) {

// parsing handlebars into js
handlebars: {
options: {
alias: {
'handlebars': 'gallery/handlebars/1.3.0/handlebars-runtime'
}
},
files: [{
expand: true,
cwd: 'test/cases/handlebars',
Expand All @@ -167,6 +177,9 @@ module.exports = function(grunt) {

css2js: {
options: {
alias: {
'importstyle': 'pandora/importstyle/1.0.0/importstyle'
},
parsers: {
'.css': [css2jsParser]
}
Expand All @@ -181,11 +194,14 @@ module.exports = function(grunt) {

style: {
options: {
alias: {
'importstyle': 'pandora/importstyle/1.0.0/importstyle'
},
parsers: {
'.css': [css2jsParser],
'.js': [jsParser]
},
styleBox: ["a.css"],
styleBox: ['a.css'],
idleading: 'arale/widget/1.0.0/'
},
files: [{
Expand Down
12 changes: 11 additions & 1 deletion README.md
Expand Up @@ -58,7 +58,7 @@ Prepend idleading to generate the id of the module.
Type: `Object`
Default value: `{}`

Alias of modules.
Alias of modules, such as handlebars and importStyle id.

#### options.debug

Expand All @@ -69,6 +69,8 @@ Create a debugfile or not.

#### options.handlebars

**deprecated**, use `options.alias` instead.

Type: `Object`

Options for handlebars compiler.
Expand Down Expand Up @@ -131,6 +133,14 @@ In lieu of a formal styleguide, take care to maintain the existing coding style.

## Release History

**Sep 1st, 2014** `0.4.2`

- get `handlebars` and `importStyle` id in `options.alias`

- set default css parser to `css2jsParser`

- add `importStyle` template

**Dec 4th, 2013** `0.4.0`

fix Windows path #58
Expand Down
6 changes: 3 additions & 3 deletions package.json
@@ -1,7 +1,7 @@
{
"name": "grunt-cmd-transport",
"description": "Transport javascript into cmd.",
"version": "0.4.1",
"version": "0.4.2",
"homepage": "https://github.com/spmjs/grunt-cmd-transport",
"author": {
"name": "Hsiaoming Yang",
Expand Down Expand Up @@ -29,7 +29,7 @@
"dependencies": {
"clean-css": "~1.0.1",
"cmd-util": "~0.3.5",
"handlebars": "1.0.11",
"handlebars": "1.3.0",
"uglify-js": "~2.2.5",
"css": "~1.4.0"
},
Expand All @@ -43,4 +43,4 @@
"keywords": [
"gruntplugin"
]
}
}
17 changes: 6 additions & 11 deletions tasks/lib/style.js
Expand Up @@ -19,7 +19,10 @@ exports.init = function(grunt) {
var data = fileObj.srcData || grunt.file.read(fileObj.src);
var id = unixy(options.idleading + fileObj.name.replace(/\.js$/, ''));

data = css2js(data, id, options, fileObj);
// importstyle alias
var alias = options.alias.importstyle || options.importstyle.id;

data = css2js(data, id, alias, options, fileObj);
data = ast.getAst(data).print_to_string(options.uglify);
var dest = fileObj.dest + '.js';
grunt.file.write(dest, data);
Expand Down Expand Up @@ -124,7 +127,7 @@ function parseRules(rules, prefix) {
});
}

function css2js(code, id, options, fileObj) {
function css2js(code, id, alias, options, fileObj) {
// ex. arale/widget/1.0.0/ => arale-widget-1_0_0
var styleId = unixy((options || {}).idleading || '')
.replace(/\/$/, '')
Expand Down Expand Up @@ -158,20 +161,12 @@ function css2js(code, id, options, fileObj) {
removeEmpty: true
});

// transform css to js
// spmjs/spm#581
var tpl = [
'define("%s", [], function() {',
"seajs.importStyle('%s')",
'});'
].join('\n');

// spmjs/spm#651
code = code.split(/\r\n|\r|\n/).map(function(line) {
return line.replace(/\\/g, '\\\\');
}).join('\n');

code = format(tpl, id, code.replace(/\'/g, '\\\''));
code = format(options.css.template, id, alias, alias, code.replace(/\'/g, '\\\''), id);
return code;
}

Expand Down
14 changes: 2 additions & 12 deletions tasks/lib/template.js
Expand Up @@ -47,24 +47,14 @@ exports.init = function(grunt) {
var id = unixy(options.idleading + fileObj.name.replace(/\.js$/, ''));

// handlebars alias
var alias = options.handlebars.id;

var template = [
'define("%s", ["%s"], function(require, exports, module) {',
'var Handlebars = require("%s");',
'var template = Handlebars.template;',
'module.exports = template(',
'%s',
');',
'})'
].join('\n');
var alias = options.alias.handlebars || options.handlebars.id;

var data = fileObj.srcData || grunt.file.read(fileObj.src);

patchHandlebars(handlebars);
var code = handlebars.precompile(data, options.handlebars);

var ret = format(template, id, alias, alias, code);
var ret = format(options.handlebars.template, id, alias, alias, code);
var astCache = ast.getAst(ret);

data = astCache.print_to_string(options.uglify);
Expand Down
30 changes: 26 additions & 4 deletions tasks/transport.js
Expand Up @@ -22,7 +22,10 @@ module.exports = function(grunt) {
paths: ['sea-modules'],

idleading: '',
alias: {},
alias: {
// importstyle: 'pandora/importstyle/1.0.0/importstyle',
// handlebars: 'gallery/handlebars/1.3.0/handlebars-runtime'
},

// create a debug file or not
debug: true,
Expand All @@ -33,18 +36,37 @@ module.exports = function(grunt) {
// define parsers
parsers: {
'.js': [script.jsParser],
'.css': [style.cssParser],
'.css': [style.css2jsParser],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个为什么改了

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在我目前参与的基于 seajs 的项目中,全部都是用 css2jsParser + import-style ,像用 handlebars 一样用 import-style

css 的其它处理,都交给less(或 sass)。
所以我将默认改为css2jsParser。

'.html': [text.html2jsParser],
'.json': [json.jsonParser],
'.tpl': [template.tplParser],
'.handlebars': [template.handlebarsParser]
},

// for styles
css: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个应该是 css2js 吧

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

就是 css,指的是文件后缀名,与后面的 handlebars 一个道理。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的 css 是指转换 css 文件,css2js 是将 css 转换成 js

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css 后的一个 key 是 handlebars,
我的理解,handlebars 指的是文件类型,于是我就定义了 css,存放类型为 css 的文件的配置参数。

你的理解,handlebars 指的是 parser ?

template: [
'define(\'%s\', [\'%s\'], function(require, exports, module) {',
'var importStyle = require(\'%s\');',
'module.exports = function() {',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@afc163 这个有什么建议,我觉得返回一个函数也挺好,可以控制加载样式的时间,而不是执行就加载。

'importStyle(\'%s\', \'%s\');',
'};',
'});'
].join('\n')
},

// for handlebars
handlebars: {
id: 'gallery/handlebars/1.0.2/runtime',
knownHelpers: [],
knownHelpersOnly: false
knownHelpersOnly: false,
template: [
'define(\'%s\', [\'%s\'], function(require, exports, module) {',
'var Handlebars = require(\'%s\');',
'module.exports = Handlebars.template(',
'%s',
');',
'})'
].join('\n')
},

// output beautifier
Expand Down
7 changes: 5 additions & 2 deletions test/cases/css2js/a-debug.css.js.expect
@@ -1,3 +1,6 @@
define("a-debug.css", [], function() {
seajs.importStyle("body{color:#fff}");
define("a-debug.css", [ "pandora/importstyle/1.0.0/importstyle-debug" ], function(require, exports, module) {
var importStyle = require("pandora/importstyle/1.0.0/importstyle-debug");
module.exports = function() {
importStyle("body{color:#fff}", "a.css");
};
});
7 changes: 5 additions & 2 deletions test/cases/css2js/a.css.js.expect
@@ -1,3 +1,6 @@
define("a.css", [], function() {
seajs.importStyle("body{color:#fff}");
define("a.css", [ "pandora/importstyle/1.0.0/importstyle" ], function(require, exports, module) {
var importStyle = require("pandora/importstyle/1.0.0/importstyle");
module.exports = function() {
importStyle("body{color:#fff}", "a.css");
};
});
31 changes: 16 additions & 15 deletions test/cases/handlebars/month-debug.handlebars.js.expect
@@ -1,8 +1,7 @@
define("month-debug.handlebars", [ "gallery/handlebars/1.0.2/runtime-debug" ], function(require, exports, module) {
var Handlebars = require("gallery/handlebars/1.0.2/runtime-debug");
var template = Handlebars.template;
module.exports = template(function(Handlebars, depth0, helpers, partials, data) {
this.compilerInfo = [ 3, ">= 1.0.0-rc.4" ];
define("month-debug.handlebars", [ "gallery/handlebars/1.3.0/handlebars-runtime-debug" ], function(require, exports, module) {
var Handlebars = require("gallery/handlebars/1.3.0/handlebars-runtime-debug");
module.exports = Handlebars.template(function(Handlebars, depth0, helpers, partials, data) {
this.compilerInfo = [ 4, ">= 1.0.0" ];
helpers = helpers || {};
for (var key in Handlebars.helpers) {
helpers[key] = helpers[key] || Handlebars.helpers[key];
Expand All @@ -25,9 +24,9 @@ define("month-debug.handlebars", [ "gallery/handlebars/1.0.2/runtime-debug" ], f
return buffer;
}
function program2(depth0, data) {
var buffer = "", stack1, options;
var buffer = "", stack1, helper, options;
buffer += '\n <li class="';
stack1 = helpers.unless.call(depth0, depth0.available, {
stack1 = helpers.unless.call(depth0, depth0 && depth0.available, {
hash: {},
inverse: self.noop,
fn: self.program(3, program3, data),
Expand All @@ -37,28 +36,30 @@ define("month-debug.handlebars", [ "gallery/handlebars/1.0.2/runtime-debug" ], f
buffer += stack1;
}
buffer += '" data-role="month" data-value="';
if (stack1 = helpers.value) {
stack1 = stack1.call(depth0, {
if (helper = helpers.value) {
stack1 = helper.call(depth0, {
hash: {},
data: data
});
} else {
stack1 = depth0.value;
stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1;
helper = depth0 && depth0.value;
stack1 = typeof helper === functionType ? helper.call(depth0, {
hash: {},
data: data
}) : helper;
}
buffer += escapeExpression(stack1) + '">';
buffer += escapeExpression(stack1) + '">' + escapeExpression((helper = helpers._ || depth0 && depth0._,
options = {
hash: {},
data: data
};
buffer += escapeExpression((stack1 = helpers["_"], stack1 ? stack1.call(depth0, depth0.label, options) : helperMissing.call(depth0, "_", depth0.label, options))) + "</li>\n ";
}, helper ? helper.call(depth0, depth0 && depth0.label, options) : helperMissing.call(depth0, "_", depth0 && depth0.label, options))) + "</li>\n ";
return buffer;
}
function program3(depth0, data) {
return "disabled-element";
}
buffer += '<div class="ui-calendar-month">\n';
stack1 = helpers.each.call(depth0, depth0.items, {
stack1 = helpers.each.call(depth0, depth0 && depth0.items, {
hash: {},
inverse: self.noop,
fn: self.program(1, program1, data),
Expand Down
31 changes: 16 additions & 15 deletions test/cases/handlebars/month.handlebars.js.expect
@@ -1,8 +1,7 @@
define("month.handlebars", [ "gallery/handlebars/1.0.2/runtime" ], function(require, exports, module) {
var Handlebars = require("gallery/handlebars/1.0.2/runtime");
var template = Handlebars.template;
module.exports = template(function(Handlebars, depth0, helpers, partials, data) {
this.compilerInfo = [ 3, ">= 1.0.0-rc.4" ];
define("month.handlebars", [ "gallery/handlebars/1.3.0/handlebars-runtime" ], function(require, exports, module) {
var Handlebars = require("gallery/handlebars/1.3.0/handlebars-runtime");
module.exports = Handlebars.template(function(Handlebars, depth0, helpers, partials, data) {
this.compilerInfo = [ 4, ">= 1.0.0" ];
helpers = helpers || {};
for (var key in Handlebars.helpers) {
helpers[key] = helpers[key] || Handlebars.helpers[key];
Expand All @@ -25,9 +24,9 @@ define("month.handlebars", [ "gallery/handlebars/1.0.2/runtime" ], function(requ
return buffer;
}
function program2(depth0, data) {
var buffer = "", stack1, options;
var buffer = "", stack1, helper, options;
buffer += '\n <li class="';
stack1 = helpers.unless.call(depth0, depth0.available, {
stack1 = helpers.unless.call(depth0, depth0 && depth0.available, {
hash: {},
inverse: self.noop,
fn: self.program(3, program3, data),
Expand All @@ -37,28 +36,30 @@ define("month.handlebars", [ "gallery/handlebars/1.0.2/runtime" ], function(requ
buffer += stack1;
}
buffer += '" data-role="month" data-value="';
if (stack1 = helpers.value) {
stack1 = stack1.call(depth0, {
if (helper = helpers.value) {
stack1 = helper.call(depth0, {
hash: {},
data: data
});
} else {
stack1 = depth0.value;
stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1;
helper = depth0 && depth0.value;
stack1 = typeof helper === functionType ? helper.call(depth0, {
hash: {},
data: data
}) : helper;
}
buffer += escapeExpression(stack1) + '">';
buffer += escapeExpression(stack1) + '">' + escapeExpression((helper = helpers._ || depth0 && depth0._,
options = {
hash: {},
data: data
};
buffer += escapeExpression((stack1 = helpers["_"], stack1 ? stack1.call(depth0, depth0.label, options) : helperMissing.call(depth0, "_", depth0.label, options))) + "</li>\n ";
}, helper ? helper.call(depth0, depth0 && depth0.label, options) : helperMissing.call(depth0, "_", depth0 && depth0.label, options))) + "</li>\n ";
return buffer;
}
function program3(depth0, data) {
return "disabled-element";
}
buffer += '<div class="ui-calendar-month">\n';
stack1 = helpers.each.call(depth0, depth0.items, {
stack1 = helpers.each.call(depth0, depth0 && depth0.items, {
hash: {},
inverse: self.noop,
fn: self.program(1, program1, data),
Expand Down