Skip to content
This repository was archived by the owner on Jul 18, 2024. It is now read-only.

Commit f7135fe

Browse files
seejamescodeseejamescode
committed
fix(script): babel should run after src files are moved
1 parent d614788 commit f7135fe

File tree

5 files changed

+88
-169
lines changed

5 files changed

+88
-169
lines changed

‎bin/index.js‎

Lines changed: 87 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
#!/usr/bin/env node
2+
"use strict";
3+
4+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
5+
26
const gulp = require("gulp"),
3-
cleanCSS = require("gulp-clean-css"),
4-
del = require("del"),
5-
fs = require("fs"),
6-
handlebars = require("handlebars"),
7-
jeditor = require("gulp-json-editor"),
8-
jsonSass = require("json-sass"),
9-
map = require("through2-map"),
10-
rename = require("gulp-rename"),
11-
sass = require("gulp-sass"),
12-
source = require("vinyl-source-stream"),
13-
vinylPaths = require("vinyl-paths"),
14-
zip = require("gulp-zip");
7+
cleanCSS = require("gulp-clean-css"),
8+
del = require("del"),
9+
fs = require("fs"),
10+
handlebars = require("handlebars"),
11+
jeditor = require("gulp-json-editor"),
12+
jsonSass = require("json-sass"),
13+
map = require("through2-map"),
14+
rename = require("gulp-rename"),
15+
sass = require("gulp-sass"),
16+
source = require("vinyl-source-stream"),
17+
vinylPaths = require("vinyl-paths"),
18+
zip = require("gulp-zip");
1519

1620
const dirRoot = process.cwd();
1721
const routeConfig = `${dirRoot}/css-gridish.json`;
1822
const config = require(routeConfig);
19-
const intro =
20-
config.paths !== undefined && config.paths.intro !== undefined
21-
? fs.readFileSync(`${dirRoot}/${config.paths.intro}`, "utf8")
22-
: "";
23-
const route =
24-
config.paths !== undefined && config.paths.route !== undefined
25-
? config.paths.route
26-
: "css-gridish";
23+
const intro = config.paths !== undefined && config.paths.intro !== undefined ? fs.readFileSync(`${dirRoot}/${config.paths.intro}`, "utf8") : "";
24+
const route = config.paths !== undefined && config.paths.route !== undefined ? config.paths.route : "css-gridish";
2725
const dirDest = `${dirRoot}/${route}`;
2826
const dirDestCss = `${dirDest}/\css`;
2927
const dirDestDesign = `${__dirname}/css-gridish-design.json`;
@@ -33,7 +31,7 @@ const prefix = config.prefix ? config.prefix : "gridish";
3331

3432
const artboard = require(`${__dirname}/sketch/artboard.json`);
3533

36-
const parseUnit = function(value, width) {
34+
const parseUnit = function (value, width) {
3735
let parsed = value;
3836
if (value !== 0) {
3937
if (value.includes("vw")) {
@@ -49,11 +47,11 @@ const parseUnit = function(value, width) {
4947
return parsed;
5048
};
5149

52-
handlebars.registerHelper("length", function(json) {
50+
handlebars.registerHelper("length", function (json) {
5351
return Object.keys(json).length;
5452
});
5553

56-
handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) {
54+
handlebars.registerHelper("math", function (lvalue, operator, rvalue, options) {
5755
lvalue = parseFloat(lvalue);
5856
rvalue = parseFloat(rvalue);
5957

@@ -66,103 +64,61 @@ handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) {
6664
}[operator];
6765
});
6866

69-
gulp.task("clean", function() {
67+
gulp.task("clean", function () {
7068
return del([dirDestCss, dirDestScss, `${dirDest}/${prefix}-grid.sketch`]);
7169
});
7270

73-
gulp.task("css", ["scssRenameLegacy"], function() {
74-
return gulp
75-
.src(`${dirDestScss}/${prefix}-grid.s\css`)
76-
.pipe(sass().on("error", sass.logError))
77-
.pipe(rename(`${prefix}-grid.\css`))
78-
.pipe(gulp.dest(dirDestCss))
79-
.pipe(
80-
cleanCSS({
81-
level: 2
82-
})
83-
)
84-
.pipe(rename(`${prefix}-grid.min.\css`))
85-
.pipe(gulp.dest(dirDestCss));
71+
gulp.task("css", ["scssRenameLegacy"], function () {
72+
return gulp.src(`${dirDestScss}/${prefix}-grid.s\css`).pipe(sass().on("error", sass.logError)).pipe(rename(`${prefix}-grid.\css`)).pipe(gulp.dest(dirDestCss)).pipe(cleanCSS({
73+
level: 2
74+
})).pipe(rename(`${prefix}-grid.min.\css`)).pipe(gulp.dest(dirDestCss));
8675
});
8776

88-
gulp.task("css-legacy", ["css"], function() {
89-
return gulp
90-
.src(`${dirDestScss}/${prefix}-grid-legacy.s\css`)
91-
.pipe(sass().on("error", sass.logError))
92-
.pipe(rename(`${prefix}-grid-legacy.\css`))
93-
.pipe(gulp.dest(dirDestCss))
94-
.pipe(
95-
cleanCSS({
96-
level: 2
97-
})
98-
)
99-
.pipe(rename(`${prefix}-grid-legacy.min.\css`))
100-
.pipe(gulp.dest(dirDestCss));
77+
gulp.task("css-legacy", ["css"], function () {
78+
return gulp.src(`${dirDestScss}/${prefix}-grid-legacy.s\css`).pipe(sass().on("error", sass.logError)).pipe(rename(`${prefix}-grid-legacy.\css`)).pipe(gulp.dest(dirDestCss)).pipe(cleanCSS({
79+
level: 2
80+
})).pipe(rename(`${prefix}-grid-legacy.min.\css`)).pipe(gulp.dest(dirDestCss));
10181
});
10282

103-
gulp.task("docs", ["css-legacy"], function() {
104-
return gulp
105-
.src(`${__dirname}/docs/*.hbs`)
106-
.pipe(
107-
map.obj(chunk => {
108-
var template = handlebars.compile(chunk.contents.toString());
109-
chunk.contents = new Buffer(
110-
template({
111-
config: {
112-
...config,
113-
classBreakpoints: Object.keys(config.breakpoints).slice(0, -1),
114-
intro
115-
}
116-
})
117-
);
118-
return chunk;
119-
})
120-
)
121-
.pipe(
122-
rename(path => {
123-
// a template file of the form AAAA.BBB.hbs produces output file AAAA.BBB
124-
var dot = path.basename.lastIndexOf(".");
125-
path.extname = path.basename.substring(dot);
126-
path.basename = path.basename.substring(0, dot);
83+
gulp.task("docs", ["css-legacy"], function () {
84+
return gulp.src(`${__dirname}/docs/*.hbs`).pipe(map.obj(chunk => {
85+
var template = handlebars.compile(chunk.contents.toString());
86+
chunk.contents = new Buffer(template({
87+
config: _extends({}, config, {
88+
classBreakpoints: Object.keys(config.breakpoints).slice(0, -1),
89+
intro
12790
})
128-
)
129-
.pipe(gulp.dest(dirDest));
91+
}));
92+
return chunk;
93+
})).pipe(rename(path => {
94+
// a template file of the form AAAA.BBB.hbs produces output file AAAA.BBB
95+
var dot = path.basename.lastIndexOf(".");
96+
path.extname = path.basename.substring(dot);
97+
path.basename = path.basename.substring(0, dot);
98+
})).pipe(gulp.dest(dirDest));
13099
});
131100

132-
gulp.task("scss", ["valuesClean"], function() {
101+
gulp.task("scss", ["valuesClean"], function () {
133102
return gulp.src(`${__dirname}/scss/**/*.s\css`).pipe(gulp.dest(dirDestScss));
134103
});
135104

136-
gulp.task("scssRename", ["scss"], function() {
137-
return gulp
138-
.src(`${dirDestScss}/gridish-grid.s\css`)
139-
.pipe(vinylPaths(del))
140-
.pipe(rename(`${prefix}-grid.s\css`))
141-
.pipe(gulp.dest(dirDestScss));
105+
gulp.task("scssRename", ["scss"], function () {
106+
return gulp.src(`${dirDestScss}/gridish-grid.s\css`).pipe(vinylPaths(del)).pipe(rename(`${prefix}-grid.s\css`)).pipe(gulp.dest(dirDestScss));
142107
});
143108

144-
gulp.task("scssRenameLegacy", ["scssRename"], function() {
145-
return gulp
146-
.src(`${dirDestScss}/gridish-grid-legacy.s\css`)
147-
.pipe(vinylPaths(del))
148-
.pipe(rename(`${prefix}-grid-legacy.s\css`))
149-
.pipe(gulp.dest(dirDestScss));
109+
gulp.task("scssRenameLegacy", ["scssRename"], function () {
110+
return gulp.src(`${dirDestScss}/gridish-grid-legacy.s\css`).pipe(vinylPaths(del)).pipe(rename(`${prefix}-grid-legacy.s\css`)).pipe(gulp.dest(dirDestScss));
150111
});
151112

152-
gulp.task("sketchClean", ["sketchZip"], function() {
113+
gulp.task("sketchClean", ["sketchZip"], function () {
153114
return del([dirDestSketch]);
154115
});
155116

156-
gulp.task("sketchFiles", ["docs"], function() {
157-
return gulp
158-
.src([
159-
`${__dirname}/sketch/files/**/*`,
160-
`!${__dirname}/sketch/files/pages/BC333699-815E-4E1B-9816-9836EDA5B291.json`
161-
])
162-
.pipe(gulp.dest(dirDestSketch));
117+
gulp.task("sketchFiles", ["docs"], function () {
118+
return gulp.src([`${__dirname}/sketch/files/**/*`, `!${__dirname}/sketch/files/pages/BC333699-815E-4E1B-9816-9836EDA5B291.json`]).pipe(gulp.dest(dirDestSketch));
163119
});
164120

165-
gulp.task("sketchPage", ["sketchFiles"], function() {
121+
gulp.task("sketchPage", ["sketchFiles"], function () {
166122
// Add breakpoint values to extra artboards
167123
const originalBreakpoints = config.breakpoints;
168124
let allBreakpoints = originalBreakpoints;
@@ -172,34 +128,27 @@ gulp.task("sketchPage", ["sketchFiles"], function() {
172128
let found = false;
173129
for (let j = 0; j < Object.values(originalBreakpoints).length; j++) {
174130
// should catch at max
175-
if (
176-
Object.values(originalBreakpoints)[j + 1] !== undefined &&
177-
Object.values(originalBreakpoints)[j + 1].breakpoint > value &&
178-
!found
179-
) {
180-
allBreakpoints[name] = {
181-
...Object.values(originalBreakpoints)[j],
131+
if (Object.values(originalBreakpoints)[j + 1] !== undefined && Object.values(originalBreakpoints)[j + 1].breakpoint > value && !found) {
132+
allBreakpoints[name] = _extends({}, Object.values(originalBreakpoints)[j], {
182133
breakpoint: value
183-
};
134+
});
184135
found = true;
185136
} else if (Object.values(originalBreakpoints)[i + 1] === undefined) {
186-
allBreakpoints[name] = {
187-
...Object.values(originalBreakpoints)[i],
137+
allBreakpoints[name] = _extends({}, Object.values(originalBreakpoints)[i], {
188138
breakpoint: value
189-
};
139+
});
190140
}
191141
}
192142
}
193143

194144
// Sort all breakpoints by size
195145
let sorted = Object.values(allBreakpoints);
196146
for (let i = 0; i < sorted.length; i++) {
197-
sorted[i] = {
198-
...sorted[i],
147+
sorted[i] = _extends({}, sorted[i], {
199148
name: Object.keys(allBreakpoints)[i]
200-
};
149+
});
201150
}
202-
sorted = sorted.sort(function(a, b) {
151+
sorted = sorted.sort(function (a, b) {
203152
return a.breakpoint - b.breakpoint;
204153
});
205154

@@ -215,82 +164,52 @@ gulp.task("sketchPage", ["sketchFiles"], function() {
215164
const gridWidth = width - margin * 2;
216165
const gutterWidth = gutter;
217166

218-
layers.push({
219-
...artboard,
167+
layers.push(_extends({}, artboard, {
220168
name: `${values.name}-${width}px-${values.columns}`,
221169
do_objectID: artboard.do_objectID.slice(0, -1) + i,
222-
frame: {
223-
...artboard.frame,
170+
frame: _extends({}, artboard.frame, {
224171
width,
225172
x
226-
},
227-
grid: {
228-
...artboard.grid,
173+
}),
174+
grid: _extends({}, artboard.grid, {
229175
gridSize: config.rowHeight * config.rem
230-
},
231-
layout: {
232-
...artboard.layout,
233-
columnWidth:
234-
(gridWidth - gutterWidth * values.columns) / values.columns,
176+
}),
177+
layout: _extends({}, artboard.layout, {
178+
columnWidth: (gridWidth - gutterWidth * values.columns) / values.columns,
235179
gutterWidth,
236180
horizontalOffset: margin,
237181
numberOfColumns: values.columns,
238182
totalWidth: gridWidth
239-
}
240-
});
241-
}
242-
return gulp
243-
.src(
244-
`${__dirname}/sketch/files/pages/BC333699-815E-4E1B-9816-9836EDA5B291.json`
245-
)
246-
.pipe(
247-
jeditor({
248-
layers
249183
})
250-
)
251-
.pipe(gulp.dest(`${dirDestSketch}/pages`));
184+
}));
185+
}
186+
return gulp.src(`${__dirname}/sketch/files/pages/BC333699-815E-4E1B-9816-9836EDA5B291.json`).pipe(jeditor({
187+
layers
188+
})).pipe(gulp.dest(`${dirDestSketch}/pages`));
252189
});
253190

254-
gulp.task("sketchZip", ["sketchPage"], function() {
255-
return gulp
256-
.src(`${dirDestSketch}/**/*`)
257-
.pipe(zip(`${prefix}-grid.zip`))
258-
.pipe(rename(`${prefix}-grid.sketch`))
259-
.pipe(vinylPaths(del))
260-
.pipe(gulp.dest(dirDest));
191+
gulp.task("sketchZip", ["sketchPage"], function () {
192+
return gulp.src(`${dirDestSketch}/**/*`).pipe(zip(`${prefix}-grid.zip`)).pipe(rename(`${prefix}-grid.sketch`)).pipe(vinylPaths(del)).pipe(gulp.dest(dirDest));
261193
});
262194

263-
gulp.task("values", ["valuesPrep"], function() {
264-
return fs
265-
.createReadStream(dirDestDesign)
266-
.pipe(
267-
jsonSass({
268-
prefix: "$grid-values: "
269-
})
270-
)
271-
.pipe(source(routeConfig))
272-
.pipe(rename("_values.scss"))
273-
.pipe(gulp.dest(dirDestScss));
195+
gulp.task("values", ["valuesPrep"], function () {
196+
return fs.createReadStream(dirDestDesign).pipe(jsonSass({
197+
prefix: "$grid-values: "
198+
})).pipe(source(routeConfig)).pipe(rename("_values.scss")).pipe(gulp.dest(dirDestScss));
274199
});
275200

276-
gulp.task("valuesClean", ["values"], function() {
201+
gulp.task("valuesClean", ["values"], function () {
277202
return fs.unlinkSync(dirDestDesign);
278203
});
279204

280-
gulp.task("valuesPrep", ["clean"], function() {
281-
return fs.writeFileSync(
282-
dirDestDesign,
283-
JSON.stringify({
284-
...config,
285-
paths: null
286-
})
287-
);
205+
gulp.task("valuesPrep", ["clean"], function () {
206+
return fs.writeFileSync(dirDestDesign, JSON.stringify(_extends({}, config, {
207+
paths: null
208+
})));
288209
});
289210

290-
gulp.task("default", ["sketchClean"], function() {
291-
console.log(
292-
`CSS Gridish finished building your ${prefix} grid in ${dirDest}! 🏁`
293-
);
211+
gulp.task("default", ["sketchClean"], function () {
212+
console.log(`CSS Gridish finished building your ${prefix} grid in ${dirDest}! 🏁`);
294213
});
295214

296215
gulp.start("default");

‎examples/bootstrap/css-gridish/bootstrap-grid.sketch‎

0 Bytes
Binary file not shown.

‎examples/carbon/css-gridish/bx-grid.sketch‎

0 Bytes
Binary file not shown.

‎examples/material/css-gridish/material-grid.sketch‎

0 Bytes
Binary file not shown.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"scripts": {
3939
"build": "npm run build:src && npm run build:examples",
4040
"build:src":
41-
"babel src/index.js --out-file ./bin/index.js && cp -a src/. bin/",
41+
"cp -a src/. bin/ && babel src/index.js --out-file ./bin/index.js",
4242
"build:examples":
4343
"npm run build --prefix ./examples/bootstrap && npm run build --prefix ./examples/carbon && npm run build --prefix ./examples/material",
4444
"dev": "gulp watch",

0 commit comments

Comments
 (0)