Initial commit - 1d47d7ffb7

Created .gitignore

@@ -1,0 +1,4
+app/node_modules
+app/package-lock.json
+app/src/css
+app/src/vendor

Created Dockerfile

@@ -1,0 +1,18
+FROM node:latest
+
+RUN apt-get update -qq && apt-get install -y build-essential
+RUN apt-get install -y ruby ruby-dev
+RUN gem install sass
+RUN npm install gulp -g
+
+RUN mkdir /base
+WORKDIR /base
+ADD app/package.json /base/package.json
+
+RUN npm install
+
+EXPOSE 1313
+EXPOSE 3001
+
+WORKDIR /base/app
+CMD ["bash", "-c", "/usr/local/bin/gulp serve"]

Created app/gulpfile.js

@@ -1,0 +1,108
+'use strict';
+
+var browserSync = require('browser-sync');
+var del = require('del');
+var gulp = require('gulp');
+var postcss = require('gulp-postcss')
+var uncss = require('postcss-uncss')
+var cssnano = require('cssnano')
+var plugins = require('gulp-load-plugins')();
+var gzip = require('gulp-gzip');
+var sass = require('gulp-sass');
+
+var pkg = require('./package.json');
+var dirs = pkg['configuration'].directories;
+var reload = browserSync.reload;
+
+var browserSyncOptions = {
+ logPrefix: 'TABLIER',
+ notify: false,
+ open: false,
+ port: 1313,
+ injectChanges: false,
+};
+
+gulp.task('clean:before', function (done) {
+ del([dirs.dist]).then(function () {
+ done();
+ });
+});
+
+gulp.task('clean:after', function (done) {
+ del([
+ dirs.dist + '/{css,css/**}',
+ dirs.dist + '/{img,/img/**}',
+ dirs.dist + '/{js,/js/**}'
+ ]).then(function () {
+ done();
+ });
+});
+
+
+gulp.task('copy:css', function () {
+ return gulp.src(dirs.src + '/css/main.css')
+ .pipe(gulp.dest(dirs.dist + '/css/'));
+});
+
+gulp.task('copy', gulp.series('copy:css'));
+
+gulp.task('sass', function() {
+ return gulp.src(dirs.src + '/sass/style.scss')
+ .pipe(sass().on('error', sass.logError))
+ .pipe(gulp.dest(dirs.src + '/css/'));
+});
+
+gulp.task('generate:main.css', gulp.series('sass', function () {
+ var postConfig = [
+ uncss({
+ html: [dirs.src + '/index.html']
+ }),
+ cssnano(),
+ ];
+ return gulp.src(dirs.src + '/css/style.css')
+ .pipe(postcss(postConfig))
+ .pipe(plugins.rename('main.css'))
+ .pipe(gulp.dest(dirs.src + '/css/'))
+ .pipe(reload({ stream: true }));
+}));
+
+
+gulp.task('compress', function() {
+ gulp.src(dirs.dist + '/**/*.{css,html,ico,js,svg,txt,xml}')
+ .pipe(gzip())
+ .pipe(gulp.dest(dirs.dist));
+});
+
+gulp.task('build', gulp.series(
+ 'clean:before',
+ 'generate:main.css',
+ 'copy',
+ 'clean:after',
+ 'compress',
+));
+
+gulp.task('default', gulp.series('build'));
+
+gulp.task('serve', gulp.series('generate:main.css', function () {
+
+ browserSyncOptions.server = dirs.src;
+ browserSync(browserSyncOptions);
+
+ gulp.watch([
+ dirs.src + '/**/*.html'
+ ], reload);
+
+ gulp.watch([
+ dirs.src + '/sass/**/*.scss'
+ ], gulp.series('sass', function() { console.log("hue?"); }));
+
+ gulp.watch([
+ dirs.src + '/css/**/*.css',
+ '!' + dirs.src + '/css/main.css'
+ ], gulp.series('generate:main.css', reload));
+}));
+
+gulp.task('serve:build', gulp.series('build', function () {
+ browserSyncOptions.server = dirs.dist;
+ browserSync(browserSyncOptions);
+}));

Created app/package.json

@@ -1,0 +1,48
+{
+ "devDependencies": {
+ "browser-sync": "^2.26.3",
+ "cssnano": "^4.1.8",
+ "del": "^3.0.0",
+ "gulp": "^4.0.0",
+ "gulp-gzip": "^1.4.2",
+ "gulp-load-plugins": "^1.5.0",
+ "gulp-postcss": "^8.0.0",
+ "gulp-rename": "^1.4.0",
+ "gulp-replace": "^1.0.0",
+ "gulp-sass": "^4.0.2",
+ "postcss-uncss": "^0.16.1",
+ "sass": "^1.15.2",
+ "uncss": "^0.16.1"
+ },
+ "configuration": {
+ "directories": {
+ "dist": "dist",
+ "src": "src"
+ }
+ },
+ "cssnano": {
+ "preset": [
+ "default",
+ {
+ "discardComments": {
+ "removeAll": true
+ }
+ }
+ ]
+ },
+ "engines": {
+ "node": ">=10",
+ "npm": ">=6"
+ },
+ "private": true,
+ "scripts": {
+ "build": "gulp build",
+ "serve": "gulp serve",
+ "serve:build": "gulp serve:build",
+ "test": "gulp build"
+ },
+ "version": "0.0.1",
+ "dependencies": {
+ "dev-ip": "^1.0.1"
+ }
+}

Created app/src/css/.gitkeep

Created app/src/index.html

@@ -1,0 +1,21
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Hello Bulma!</title>
+ <link rel="stylesheet" href="css/main.css">
+ </head>
+ <body>
+ <section class="section">
+ <div class="container">
+ <h1 class="title">
+ Hello World
+ </h1>
+ <p class="subtitle">
+ My first website with <strong>Bulma</strong>!
+ </p>
+ </div>
+ </section>
+ </body>
+</html>

Created app/src/sass/style.scss

@@ -1,0 +1,11
+@charset "utf-8";
+
+@import "../vendor/bulma-0.7.2/sass/utilities/_all.sass";
+@import "../vendor/bulma-0.7.2/sass/base/_all.sass";
+@import "../vendor/bulma-0.7.2/sass/elements/button.sass";
+@import "../vendor/bulma-0.7.2/sass/elements/container.sass";
+@import "../vendor/bulma-0.7.2/sass/elements/form.sass";
+@import "../vendor/bulma-0.7.2/sass/elements/title.sass";
+@import "../vendor/bulma-0.7.2/sass/components/navbar.sass";
+@import "../vendor/bulma-0.7.2/sass/layout/hero.sass";
+@import "../vendor/bulma-0.7.2/sass/layout/section.sass";

Created app/src/vendor/.gitkeep

Created docker-compose.yml

@@ -1,0 +1,9
+version: '3'
+services:
+ css:
+ build: .
+ volumes:
+ - ./app:/base/app
+ ports:
+ - 1313:1313
+ - 3001:3001