add gulp build pipeline to online demo

This commit is contained in:
Dominik Richter 2016-09-14 15:26:57 +02:00
parent 23e1772894
commit 74ed7be3eb
3 changed files with 64 additions and 9 deletions

38
www/tutorial/gulpfile.js Normal file
View file

@ -0,0 +1,38 @@
var gulp = require('gulp'),
debug = require('gulp-debug'),
webpack = require('gulp-webpack'),
coffee = require('gulp-coffee'),
gutil = require('gulp-util'),
gif = require('gulp-if'),
gcopy = require('gulp-copy'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-clean-css');
gulp.task('webpack', function() {
return gulp.src('app/main.ts')
.pipe(webpack( require('./config/webpack.config.js') ))
.pipe(gulp.dest('dist/'));
})
gulp.task('copy', function(){
gulp.src([
'*.png',
'app/**/*.css',
'app/**/*.html',
'tutorial_files/**',
'node_modules/shellwords/src/shellwords.coffee',
])
.pipe(gcopy('dist/'));
})
gulp.task('build', ['webpack', 'copy'], function(){
return gulp.src('index.html')
.pipe(useref())
.pipe(debug({ title: 'Uglify scripts' }))
.pipe(gulpif('*.js', uglify()))
.pipe(debug({ title: 'Squash css' }))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest('dist'));
})

View file

@ -3,23 +3,29 @@
<title>InSpec Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- build:css css/combined.css -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/xterm/src/xterm.css">
<!-- endbuild -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- 1. Load libraries -->
</head>
<body>
<!-- FIXME I need compilation and integration vv -->
<script src="node_modules/shellwords/src/shellwords.coffee"></script>
<!-- Polyfill(s) for older browsers -->
<!-- build:js scripts/combined.js -->
<script src="node_modules/xterm/src/xterm.js"></script>
<script src="node_modules/xterm/addons/fit/fit.js"></script>
<!-- Polyfill for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!--2. Load Webpack Config-->
<!-- endbuild -->
<script src="dist/bundle.js"></script>
<!-- 3. Load Xterm -->
<script src="node_modules/xterm/src/xterm.js"></script>
<script src="node_modules/xterm/addons/fit/fit.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

View file

@ -33,6 +33,17 @@
"devDependencies": {
"concurrently": "^2.0.0",
"css-loader": "^0.25.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.12",
"gulp-coffee": "^2.3.2",
"gulp-copy": "0.0.2",
"gulp-debug": "^2.1.2",
"gulp-if": "^2.0.1",
"gulp-print": "^2.0.1",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.1.2",
"gulp-util": "^3.0.7",
"gulp-webpack": "^1.5.0",
"lite-server": "^2.2.0",
"sass-loader": "^4.0.2",
"source-map-loader": "^0.1.5",