1 | const gulp = require('gulp');
|
2 | const pkg = require('./package.json');
|
3 | const corePkg = require('../package.json');
|
4 | const merge = require('event-stream').merge;
|
5 | const runSequence = require('run-sequence');
|
6 | const browserSync = require('browser-sync').create();
|
7 | const $ = require('gulp-load-plugins')();
|
8 | const eco = require('eco');
|
9 | const fs = require('fs');
|
10 | const ancss = require('@onsenui/ancss');
|
11 | const cssnext = require('postcss-cssnext');
|
12 | const reporter = require('postcss-reporter');
|
13 | const historyApiFallback = require('connect-history-api-fallback');
|
14 | const {rollup} = require('rollup');
|
15 | const babel = require('rollup-plugin-babel');
|
16 | const commonjs = require('rollup-plugin-commonjs');
|
17 | const glob = require('glob');
|
18 | const rimraf = require('rimraf');
|
19 | const path = require('path');
|
20 | const yaml = require('js-yaml');
|
21 |
|
22 |
|
23 | const plumber = require('gulp-plumber');
|
24 | const postcss = require('gulp-postcss');
|
25 | const stylelint = require('gulp-stylelint');
|
26 |
|
27 | const prefix = __dirname + '/../build/css/';
|
28 | const babelrc = Object.assign({}, corePkg.babel);
|
29 | babelrc.babelrc = babelrc.presets[0][1].modules = false;
|
30 | babelrc.exclude = 'node_modules/**';
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | gulp.task('build', (done) => {
|
36 | runSequence('build-css', 'generate-preview', done);
|
37 | });
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | gulp.task('build-css', ['css-clean', 'cssnext', 'cssmin']);
|
43 |
|
44 |
|
45 |
|
46 |
|
47 | gulp.task('stylelint', () => {
|
48 | return gulp.src([
|
49 | './src/**/*.css',
|
50 | '!./src/components/combination.css',
|
51 | '!./src/iphonex-support/**/*.css'
|
52 | ])
|
53 | .pipe(stylelint({
|
54 | failAfterError: false,
|
55 | reporters: [{formatter: 'string', console: true}]
|
56 | }));
|
57 | });
|
58 |
|
59 |
|
60 |
|
61 |
|
62 | gulp.task('cssmin', ['cssnext'], () => {
|
63 | return gulp.src(prefix + '{*-,}onsen-css-components.css')
|
64 | .pipe($.cssmin())
|
65 | .pipe($.rename({suffix: '.min'}))
|
66 | .pipe(gulp.dest('./build/'))
|
67 | .pipe(gulp.dest(prefix));
|
68 | });
|
69 |
|
70 |
|
71 |
|
72 |
|
73 | gulp.task('cssnext', ['stylelint'], () => {
|
74 | const plugins = [
|
75 | require('postcss-import'),
|
76 | require('postcss-base64')({
|
77 | extensions: ['.svg'],
|
78 | root: __dirname + '/src/components/'
|
79 | }),
|
80 | cssnext({
|
81 | browsers: babelrc.presets[0][1].targets.browsers,
|
82 | }),
|
83 | reporter({
|
84 | clearAllMessages: true,
|
85 | clearReportedMessages: true,
|
86 | throwError: false
|
87 | })
|
88 | ];
|
89 |
|
90 | return gulp.src('src/{*-,}onsen-css-components.css')
|
91 | .pipe(plumber())
|
92 | .pipe(postcss(plugins))
|
93 | .pipe(gulp.dest('./build/'))
|
94 | .pipe(gulp.dest(prefix))
|
95 | .pipe(browserSync.stream());
|
96 | });
|
97 |
|
98 | gulp.task('css-clean', () => {
|
99 | rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.css');
|
100 | rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.min.css');
|
101 | rimraf.sync(prefix + '/{*-,}onsen-css-components.css');
|
102 | rimraf.sync(prefix + '/{*-,}onsen-css-components.min.css');
|
103 | });
|
104 |
|
105 |
|
106 |
|
107 |
|
108 | let lastMarkupToken = '';
|
109 | gulp.task('generate-preview', (done) => {
|
110 | const components = parseComponents();
|
111 | const markupToken = identifyComponentsMarkup(components);
|
112 |
|
113 | if (markupToken !== lastMarkupToken) {
|
114 | runSequence('preview-assets', 'preview-js', () => {
|
115 | generate(components);
|
116 | browserSync.reload();
|
117 |
|
118 | lastMarkupToken = markupToken;
|
119 | done();
|
120 | });
|
121 | } else {
|
122 | lastMarkupToken = markupToken;
|
123 | done();
|
124 | }
|
125 | });
|
126 |
|
127 | gulp.task('generate-preview-force', ['preview-assets', 'preview-js'], () => {
|
128 | generate(parseComponents());
|
129 | browserSync.reload();
|
130 | });
|
131 |
|
132 | function generate(components) {
|
133 | const template = fs.readFileSync(__dirname + '/previewer-src/index.html.eco', 'utf-8');
|
134 | const patterns = yaml.safeLoadAll(fs.readFileSync(__dirname + '/patterns.yaml', 'utf-8'));
|
135 | const themes = glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(filePath => path.basename(filePath, '.css'));
|
136 | const toJSON = JSON.stringify.bind(JSON);
|
137 |
|
138 | fs.writeFileSync(__dirname + '/build/index.html', eco.render(template, {toJSON, components, themes, patterns}), 'utf-8');
|
139 | }
|
140 |
|
141 | function identifyComponentsMarkup(componentsJSON) {
|
142 | const token = componentsJSON.map(component => {
|
143 | return component.annotation.markup;
|
144 | }).join('');
|
145 |
|
146 | return token;
|
147 | }
|
148 |
|
149 | function parseComponents() {
|
150 | const css = fs.readFileSync(__dirname + '/build/onsen-css-components.css', 'utf-8');
|
151 | const components = ancss.parse(css, {detect: line => line.match(/^~/)});
|
152 | return components || [];
|
153 | }
|
154 |
|
155 |
|
156 |
|
157 |
|
158 | gulp.task('preview-assets', () => {
|
159 | return gulp.src('previewer-src/*.{svg,css}')
|
160 | .pipe(gulp.dest('./build/'));
|
161 | });
|
162 |
|
163 |
|
164 |
|
165 |
|
166 | gulp.task('preview-js', function() {
|
167 | return rollup({
|
168 | input: 'previewer-src/app.js',
|
169 | plugins: [
|
170 | commonjs,
|
171 | babel(babelrc)
|
172 | ]
|
173 | })
|
174 | .then(bundle => {
|
175 | return bundle.write({
|
176 | file: 'build/app.gen.js',
|
177 | format: 'umd',
|
178 | sourcemap: 'inline'
|
179 | });
|
180 | });
|
181 | });
|
182 |
|
183 |
|
184 |
|
185 |
|
186 | gulp.task('serve', ['reset-console', 'build'], done => {
|
187 | gulp.watch(['src/**/*.css'], () => {
|
188 | reset();
|
189 | runSequence('build-css', 'generate-preview', outputDevServerInfo);
|
190 | });
|
191 |
|
192 | gulp.watch(['previewer-src/**', 'patterns.yaml'], () => {
|
193 | reset();
|
194 | runSequence('generate-preview-force', outputDevServerInfo)
|
195 | });
|
196 |
|
197 | browserSync.emitter.on('init', outputDevServerInfo);
|
198 |
|
199 | browserSync.init({
|
200 | logLevel: 'silent',
|
201 | ui: false,
|
202 | port: 4321,
|
203 | notify: false,
|
204 | server: {
|
205 | baseDir: __dirname + '/build',
|
206 | middleware: [historyApiFallback()],
|
207 | },
|
208 | startPath: '/',
|
209 | open: false
|
210 | });
|
211 | });
|
212 |
|
213 |
|
214 |
|
215 |
|
216 | gulp.task('reset-console', reset);
|
217 |
|
218 | function reset() {
|
219 | process.stdout.write('\x1Bc');
|
220 | }
|
221 |
|
222 | const outputDevServerInfo = (() => {
|
223 | let defer = true;
|
224 |
|
225 | return function () {
|
226 | if (defer) {
|
227 | setTimeout(() => {
|
228 | output();
|
229 | defer = true;
|
230 | }, 60);
|
231 | defer = false;
|
232 | }
|
233 | }
|
234 |
|
235 | function output() {
|
236 | const localUrl = browserSync.getOption('urls').get('local');
|
237 | const externalUrl = browserSync.getOption('urls').get('external');
|
238 |
|
239 | console.log('\nAccess URLs:');
|
240 | console.log(' Local:', $.util.colors.magenta(localUrl));
|
241 | console.log(' External:', $.util.colors.magenta(externalUrl));
|
242 | console.log();
|
243 |
|
244 | displayBuildCSSInfo();
|
245 | }
|
246 | })();
|
247 |
|
248 | function displayBuildCSSInfo() {
|
249 |
|
250 | console.log('Built CSS Files:')
|
251 | getCSSPaths().forEach(cssPath => {
|
252 | console.log(' ' + $.util.colors.magenta(cssPath));
|
253 | });
|
254 |
|
255 | function getCSSPaths() {
|
256 | return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
|
257 | return '.' + path.sep + path.relative(__dirname, cssPath);
|
258 | });
|
259 | }
|
260 | }
|
261 |
|
262 | function getCSSPaths() {
|
263 | return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
|
264 | return '.' + path.sep + path.relative(__dirname, cssPath);
|
265 | });
|
266 | }
|