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

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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