Merge pull request #1411 from google/getting-started-with-templates
Simplify the templates zip file so they are easier to grasp.master
Surma
commit
8413a12b09
|
|
@ -10,7 +10,7 @@
|
|||
<p class="mdl-cell mdl-cell--12-col">
|
||||
{{ template.description }}
|
||||
</p>
|
||||
<a href="https://storage.googleapis.com/code.getmdl.io/$$version$$/mdl-templates.zip" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
|
||||
<a href="$$hosted_libs_prefix$$/$$version$$/$$template_archive_prefix$${{ template.name }}.zip" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||||
<i class="material-icons">file_download</i>
|
||||
</button>
|
||||
|
|
|
|||
67
gulpfile.js
67
gulpfile.js
|
|
@ -36,6 +36,7 @@ var pkg = require('./package.json');
|
|||
var through = require('through2');
|
||||
var swig = require('swig');
|
||||
var hostedLibsUrlPrefix = 'https://storage.googleapis.com/code.getmdl.io';
|
||||
var templateArchivePrefix = 'mdl-template-';
|
||||
var bucketProd = 'gs://www.getmdl.io';
|
||||
var bucketStaging = 'gs://mdl-staging';
|
||||
var bucketCode = 'gs://code.getmdl.io';
|
||||
|
|
@ -403,6 +404,7 @@ gulp.task('pages', ['components'], function() {
|
|||
.pipe(applyTemplate())
|
||||
.pipe($.replace('$$version$$', pkg.version))
|
||||
.pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))
|
||||
.pipe($.replace('$$template_archive_prefix$$', templateArchivePrefix))
|
||||
/* Replacing code blocks class name to match Prism's. */
|
||||
.pipe($.replace('class="lang-', 'class="language-'))
|
||||
/* Translate html code blocks to "markup" because that's what Prism uses. */
|
||||
|
|
@ -491,37 +493,35 @@ gulp.task('zip:mdl', function() {
|
|||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
// Generate release archive containing the library, templates and assets
|
||||
// for templates. Note that it is intentional for some templates to include
|
||||
// a customised version of the material.min.css file for their own needs.
|
||||
// Others (e.g the Android template) simply use the default built version of
|
||||
// the library.
|
||||
|
||||
// Define a filter containing only the build assets we want to pluck from the
|
||||
// `dist` stream. This enables us to preserve the correct final dir structure,
|
||||
// which was not occurring when simply using `gulp.src` in `zip:templates`
|
||||
|
||||
var fileFilter = $.filter([
|
||||
'material?(.min)@(.js|.css)?(.map)',
|
||||
'templates/**/*.*',
|
||||
'assets/**/*.*',
|
||||
'LICENSE',
|
||||
'bower.json',
|
||||
'package.json']);
|
||||
// Returns the list of children directories inside the given directory.
|
||||
function getSubDirectories(dir) {
|
||||
return fs.readdirSync(dir)
|
||||
.filter(function(file) {
|
||||
return fs.statSync(dir + '/' + file).isDirectory();
|
||||
});
|
||||
}
|
||||
|
||||
// Generate release archives containing the templates and assets for templates.
|
||||
gulp.task('zip:templates', function() {
|
||||
// Stream of all `dist` files and other package manager files from root
|
||||
return gulp.src(['dist/**/*.*', 'LICENSE', 'bower.json', 'package.json'])
|
||||
.pipe(fileFilter)
|
||||
.pipe($.zip('mdl-templates.zip'))
|
||||
.pipe(fileFilter.restore())
|
||||
var templates = getSubDirectories('dist/templates');
|
||||
|
||||
// Generate a zip file for each template.
|
||||
var generateZips = templates.map(function(template) {
|
||||
return gulp.src(['dist/templates/' + template + '/**/*.*', 'LICENSE'])
|
||||
.pipe($.rename(function(path) {
|
||||
path.dirname = path.dirname.replace('dist/templates/' + template, '');
|
||||
}))
|
||||
.pipe($.zip(templateArchivePrefix + template + '.zip'))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
return merge(generateZips);
|
||||
});
|
||||
|
||||
gulp.task('zip', ['zip:templates', 'zip:mdl']);
|
||||
|
||||
gulp.task('genCodeFiles', function() {
|
||||
return gulp.src(['dist/material.*@(js|css)?(.map)', 'dist/mdl.zip', 'dist/mdl-templates.zip'],
|
||||
return gulp.src(['dist/material.*@(js|css)?(.map)', 'dist/mdl.zip', 'dist/' + templateArchivePrefix + '*.zip'],
|
||||
{read: false})
|
||||
.pipe($.tap(function(file, t) {
|
||||
codeFiles += ' dist/' + path.basename(file.path);
|
||||
|
|
@ -638,23 +638,6 @@ gulp.task('publish:staging', function() {
|
|||
mdlPublish('staging');
|
||||
});
|
||||
|
||||
gulp.task('templates:mdl', function() {
|
||||
return gulp.src([
|
||||
'templates/**/*.scss'
|
||||
])
|
||||
.pipe($.sass({
|
||||
precision: 10,
|
||||
onError: console.error.bind(console, 'Sass error:')
|
||||
}))
|
||||
.pipe($.cssInlineImages({
|
||||
webRoot: 'src'
|
||||
}))
|
||||
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
|
||||
.pipe($.csso())
|
||||
.pipe($.rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest('dist/templates'));
|
||||
});
|
||||
|
||||
gulp.task('_release', function() {
|
||||
return gulp.src(['dist/material?(.min)@(.js|.css)?(.map)', 'LICENSE',
|
||||
'README.md', 'bower.json', 'package.json', './sr?/**/*', 'gulpfile.js'])
|
||||
|
|
@ -685,6 +668,8 @@ gulp.task('templates:static', function() {
|
|||
return gulp.src([
|
||||
'templates/**/*.html',
|
||||
])
|
||||
.pipe($.replace('$$version$$', pkg.version))
|
||||
.pipe($.replace('$$hosted_libs_prefix$$', hostedLibsUrlPrefix))
|
||||
.pipe(gulp.dest('dist/templates'));
|
||||
});
|
||||
|
||||
|
|
@ -706,7 +691,7 @@ gulp.task('templates:fonts', function() {
|
|||
.pipe(gulp.dest('dist/templates/'));
|
||||
});
|
||||
|
||||
gulp.task('templates', ['templates:static', 'templates:images', 'templates:mdl',
|
||||
gulp.task('templates', ['templates:static', 'templates:images',
|
||||
'templates:fonts', 'templates:styles']);
|
||||
|
||||
gulp.task('styles:gen', ['styles'], function() {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<!-- Page styles -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css">
|
||||
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
|
|
@ -324,8 +324,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/android-dot-com/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
|
||||
<script src="../../material.min.js"></script>
|
||||
|
||||
|
||||
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="material.min.css">
|
||||
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.teal-red.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
|
|
@ -133,6 +133,6 @@
|
|||
</main>
|
||||
</div>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/article/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
|
||||
<script src="../../material.min.js"></script>
|
||||
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import '../../src/_color-definitions.scss';
|
||||
$color-primary: $palette-teal-500;
|
||||
$color-primary-dark: $palette-teal-800;
|
||||
$color-accent: $palette-red-A200;
|
||||
$color-primary-contrast: $color-dark-contrast;
|
||||
$color-accent-contrast: $color-dark-contrast;
|
||||
@import '../../src/material-design-lite';
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="material.min.css">
|
||||
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.grey-orange.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
</main>
|
||||
<div class="mdl-layout__obfuscator"></div>
|
||||
</div>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
|
||||
<script src="../../material.min.js"></script>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--white">View Source</a>
|
||||
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="material.min.css">
|
||||
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.grey-orange.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
|
|
@ -176,8 +176,8 @@
|
|||
</main>
|
||||
<div class="mdl-layout__obfuscator"></div>
|
||||
</div>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
|
||||
<script src="../../material.min.js"></script>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--white">View Source</a>
|
||||
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.mdl-card__media'), function(el) {
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import '../../src/_color-definitions.scss';
|
||||
$color-primary: $palette-grey-500;
|
||||
$color-primary-dark: $palette-grey-300;
|
||||
$color-accent: $palette-orange-A200;
|
||||
/* $color-primary-contrast: $color-light-contrast; */
|
||||
/* $color-accent-contrast: $color-light-contrast; */
|
||||
@import '../../src/material-design-lite';
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="material.min.css">
|
||||
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.cyan-light_blue.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
|
|
@ -242,7 +242,7 @@
|
|||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/dashboard/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
|
||||
<script src="../../material.min.js"></script>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/dashboard/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">View Source</a>
|
||||
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import '../../src/_color-definitions.scss';
|
||||
$color-primary: $palette-cyan-500;
|
||||
$color-primary-dark: $palette-cyan-700;
|
||||
$color-accent: $palette-cyan-600;
|
||||
$color-primary-contrast: $color-dark-contrast;
|
||||
$color-accent-contrast: $color-dark-contrast;
|
||||
$grid-desktop-gutter: 32px;
|
||||
|
||||
|
||||
@import '../../src/material-design-lite';
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="material.min.css">
|
||||
<link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.deep_purple-pink.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
|
|
@ -291,6 +291,6 @@
|
|||
</main>
|
||||
</div>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/text-only/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
|
||||
<script src="../../material.min.js"></script>
|
||||
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import '../../src/_color-definitions.scss';
|
||||
$color-primary: $palette-deep-purple-600;
|
||||
$color-primary-dark: $palette-deep-purple-800;
|
||||
$color-accent: $palette-pink-A200;
|
||||
$color-primary-contrast: $color-dark-contrast;
|
||||
$color-accent-contrast: $color-dark-contrast;
|
||||
|
||||
@import '../../src/material-design-lite';
|
||||
Loading…
Reference in New Issue