8
0
Просмотр исходного кода

Docs: Improved load times by extracting CSS to separate files and added support for snippet styles. [skip ci]

Piotrek Koszuliński 8 лет назад
Родитель
Сommit
a04477897e

+ 20 - 0
docs/assets/snippet-styles.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ */
+
+.ck-editor .ck-editor__editable {
+	padding: 1em;
+}
+
+.ck-editor .ck-editor__editable > :first-child {
+	margin-top: 0;
+}
+
+.ck-editor .ck-editor__editable > :last-child {
+	margin-bottom: 0;
+}
+
+.ck-reset.ck-list {
+	/* See https://github.com/ckeditor/ckeditor5/issues/494 */
+	margin-left: 0;
+}

+ 3 - 2
scripts/docs/snippet-adapter/package.json

@@ -3,12 +3,13 @@
   "private": true,
   "private": true,
   "dependencies": {
   "dependencies": {
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^2.0.11",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^2.0.11",
-    "babili-webpack-plugin": "^0.1.2",
+    "babel-minify-webpack-plugin": "^0.2.0",
     "css-loader": "^0.28.4",
     "css-loader": "^0.28.4",
+    "extract-text-webpack-plugin": "^3.0.0",
     "node-sass": "^4.5.3",
     "node-sass": "^4.5.3",
     "raw-loader": "^0.5.1",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.6",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "style-loader": "^0.18.2",
-    "webpack": "^3.0.0"
+    "webpack": "^3.5.0"
   }
   }
 }
 }

+ 45 - 37
scripts/docs/snippet-adapter/snippetadapter.js

@@ -10,8 +10,8 @@ const fs = require( 'fs' );
 const webpack = require( 'webpack' );
 const webpack = require( 'webpack' );
 const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
 const { bundler } = require( '@ckeditor/ckeditor5-dev-utils' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
-
-// const BabiliPlugin = require( 'babili-webpack-plugin' );
+const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
+const BabelMinifyPlugin = require( 'babel-minify-webpack-plugin' );
 
 
 module.exports = function snippetAdapter( data ) {
 module.exports = function snippetAdapter( data ) {
 	const snippetConfig = readSnippetConfig( data.snippetSource.js );
 	const snippetConfig = readSnippetConfig( data.snippetSource.js );
@@ -20,22 +20,47 @@ module.exports = function snippetAdapter( data ) {
 		entry: data.snippetSource.js,
 		entry: data.snippetSource.js,
 		outputPath: path.join( data.outputPath, data.snippetPath ),
 		outputPath: path.join( data.outputPath, data.snippetPath ),
 		language: snippetConfig.language
 		language: snippetConfig.language
+		// minify: data.options.production
 	} );
 	} );
 
 
 	return runWebpack( webpackConfig )
 	return runWebpack( webpackConfig )
 		.then( () => {
 		.then( () => {
 			return {
 			return {
-				html: generateSnippetHtml( {
-					htmlPath: data.snippetSource.html,
-					scriptPath: path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
-				} )
+				html: fs.readFileSync( data.snippetSource.html ),
+				assets: {
+					js: [
+						path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
+					],
+					css: [
+						path.join( data.relativeOutputPath, data.snippetPath, 'snippet.css' ),
+						path.join( data.basePath, 'assets', 'snippet-styles.css' )
+					]
+				}
 			};
 			};
 		} );
 		} );
 };
 };
 
 
 function getWebpackConfig( config ) {
 function getWebpackConfig( config ) {
-	return {
+	const plugins = [
+		new ExtractTextPlugin( 'snippet.css' ),
+		new CKEditorWebpackPlugin( {
+			languages: [ config.language || 'en' ]
+		} ),
+		new webpack.BannerPlugin( {
+			banner: bundler.getLicenseBanner(),
+			raw: true
+		} )
+	];
+
+	if ( config.minify ) {
+		plugins.push(
+			new BabelMinifyPlugin( null, {
+				comments: false
+			} )
+		);
+	}
 
 
+	return {
 		devtool: 'source-map',
 		devtool: 'source-map',
 
 
 		entry: config.entry,
 		entry: config.entry,
@@ -45,18 +70,7 @@ function getWebpackConfig( config ) {
 			filename: 'snippet.js'
 			filename: 'snippet.js'
 		},
 		},
 
 
-		plugins: [
-			new CKEditorWebpackPlugin( {
-				languages: [ config.language || 'en' ]
-			} ),
-			// new BabiliPlugin( null, {
-			// 	comments: false
-			// } ),
-			new webpack.BannerPlugin( {
-				banner: bundler.getLicenseBanner(),
-				raw: true
-			} )
-		],
+		plugins,
 
 
 		// Configure the paths so building CKEditor 5 snippets work even if the script
 		// Configure the paths so building CKEditor 5 snippets work even if the script
 		// is triggered from a directory outside ckeditor5 (e.g. multi-project case).
 		// is triggered from a directory outside ckeditor5 (e.g. multi-project case).
@@ -76,16 +90,18 @@ function getWebpackConfig( config ) {
 				},
 				},
 				{
 				{
 					test: /\.scss$/,
 					test: /\.scss$/,
-					use: [
-						'style-loader',
-						{
-							loader: 'css-loader',
-							options: {
-								minimize: true
-							}
-						},
-						'sass-loader'
-					]
+					use: ExtractTextPlugin.extract( {
+						fallback: 'style-loader',
+						use: [
+							{
+								loader: 'css-loader',
+								options: {
+									minimize: config.minify
+								}
+							},
+							'sass-loader'
+						]
+					} )
 				}
 				}
 			]
 			]
 		}
 		}
@@ -106,14 +122,6 @@ function runWebpack( webpackConfig ) {
 	} );
 	} );
 }
 }
 
 
-function generateSnippetHtml( data ) {
-	let html = fs.readFileSync( data.htmlPath );
-
-	html += `<script src="${ data.scriptPath }"></script>`;
-
-	return html;
-}
-
 function getModuleResolvePaths() {
 function getModuleResolvePaths() {
 	return [
 	return [
 		path.resolve( __dirname, '..', '..', '..', 'node_modules' ),
 		path.resolve( __dirname, '..', '..', '..', 'node_modules' ),