ref(assets): passe à webpack-dev-server

pull/130/head
Antoine 2022-05-09 16:47:00 +02:00
Parent 02ecc389a1
révision dd9f4cefed
13 fichiers modifiés avec 19345 ajouts et 11157 suppressions

Fichier binaire non affiché.

Fichier diff supprimé car celui-ci est trop grand Voir la Diff

Après

Largeur:  |  Hauteur:  |  Taille: 547 KiB

Fichier binaire non affiché.

Fichier binaire non affiché.

Fichier binaire non affiché.

Voir le fichier

@ -6,3 +6,18 @@
/// @type String
$font-path: "../fonts";
$img-path: "../img";
// overwrite ForkAwesome variables with unicode directly to be compiled
// into uft-8 through webpack
$fa-var-circle: "";
$fa-var-angle-right: "";
$fa-var-paperclip: "";
$fa-var-chevron-left: "";
$fa-var-chevron-right: "";
$fa-var-map-marker: "";
$fa-var-list: "";
$fa-var-plus-circle: "";
$fa-var-download: "";
$fa-var-external-link-square: "";
$fa-var-caret-up: "";
$fa-var-lock: "";

Voir le fichier

@ -1,9 +1,9 @@
@charset "utf-8";
// Configuration and helpers
@import "fork-awesome/scss/_variables.scss";
@import "abstracts/variables-bootstrap";
@import "abstracts/variables";
@import "fork-awesome/scss/_variables.scss";
// Vendors
@import "vendor/bootstrap";

Voir le fichier

@ -28,8 +28,7 @@
</title>
{% block css %}
<link rel="stylesheet" href="{% minified "css/app.css" %}">
<link rel="stylesheet" href="{% minified "css/fork-awesome.css" %}">
<link rel="stylesheet" href="{% static "main.css" %}">
{% endblock %}
{% block extra_head %}

Voir le fichier

@ -32,8 +32,7 @@
</title>
{% block css %}
<link rel="stylesheet" href="{% minified "css/app.css" %}">
<link rel="stylesheet" href="{% minified "css/fork-awesome.css" %}">
<link rel="stylesheet" href="{% static "main.css" %}">
{% endblock %}
{% block extra_head %}

Voir le fichier

@ -1,265 +0,0 @@
const gulp = require('gulp');
const plugins = require('gulp-load-plugins');
const merge = require('merge-stream');
const sherpa = require('style-sherpa');
const named = require('vinyl-named');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const browser = require('browser-sync').create();
// Load all Gulp plugins into one variable
const $ = plugins();
/// Configuration -------------------------------------------------------------
const CONFIG = {
// Proxy target of the BrowserSync'server
SERVER_PROXY: 'http://127.0.0.1:8000',
// Port on which the BrowserSync'server will listen
SERVER_PORT: 8090,
// Paths to other assets which will be copied
ASSETS_FILES: [
{
src: [
'assets/**/*',
'!assets/{img,js,scss}',
'!assets/{img,js,scss}/**/*'
],
dest: ''
},
{
// ForkAwesome
src: 'node_modules/fork-awesome/fonts/*',
dest: 'fonts/fork-awesome'
}
],
// Paths to images which will be compressed and copied
IMAGES_FILES: [
'assets/img/**/*'
],
// Paths to JavaScript entries which will be bundled
JS_ENTRIES: [
'assets/js/opted-tracking.js',
'assets/js/app.js'
],
// Paths to Sass files which will be compiled
SASS_ENTRIES: [
'assets/scss/app.scss',
'assets/scss/fork-awesome.scss'
],
// Paths to Sass libraries, which can then be loaded with @import
SASS_INCLUDE_PATHS: [
'node_modules'
],
// Path to the build output, which will never be cleaned
BUILD_PATH: 'biohdf/static'
};
/// CSS -----------------------------------------------------------------------
// Compile Sass into CSS.
gulp.task('sass', function() {
return gulp.src(CONFIG.SASS_ENTRIES)
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: CONFIG.SASS_INCLUDE_PATHS
}).on('error', $.sass.logError))
.pipe($.autoprefixer())
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/css`))
.pipe(browser.reload({ stream: true }));
});
// Lint Sass files.
gulp.task('lint:sass', function() {
return gulp.src('assets/scss/**/*.scss')
.pipe($.stylelint({
failAfterError: true,
reporters: [
{ formatter: 'verbose', console: true }
]
}));
});
// Compress CSS files.
gulp.task('compress:css', function() {
return gulp.src([
`${CONFIG.BUILD_PATH}/css/*.css`,
`!${CONFIG.BUILD_PATH}/css/*.min.css`
])
.pipe($.cleanCss())
.pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/css`));
});
gulp.task('css',
gulp.series('sass', 'compress:css'));
/// JavaScript ----------------------------------------------------------------
let webpackConfig = {
mode: 'development',
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader'
}
]
}
]
},
devtool: 'source-map',
stats: {
chunks: false,
entrypoints: false,
}
}
// Bundle JavaScript module.
gulp.task('javascript', function() {
return gulp.src(CONFIG.JS_ENTRIES)
.pipe(named())
.pipe(webpackStream(webpackConfig, webpack))
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/js`));
});
// Lint JavaScript source files.
gulp.task('lint:javascript', function() {
return gulp.src('assets/js/**/*.js')
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.eslint.failAfterError());
});
// Compress JavaScript files.
gulp.task('compress:javascript', function() {
return gulp.src([
`${CONFIG.BUILD_PATH}/js/*.js`,
`!${CONFIG.BUILD_PATH}/js/*.min.js`
])
.pipe($.terser().on('error', e => { console.log(e); }))
.pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/js`));
});
gulp.task('scripts',
gulp.series('javascript', 'compress:javascript'));
/// Other assets --------------------------------------------------------------
// Compress and copy images.
gulp.task('images', function() {
return gulp.src(CONFIG.IMAGES_FILES)
.pipe($.imagemin({ progressive: true }))
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/img`));
});
// Copy other assets files.
gulp.task('copy', function() {
return merge(CONFIG.ASSETS_FILES.map(
item => gulp.src(item.src)
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/${item.dest}`))
));
});
/// HTML files ----------------------------------------------------------------
// Generate a style guide from the Markdown content.
gulp.task('styleguide', done => {
sherpa('styleguide/index.md', {
output: 'styleguide/index.html',
template: 'styleguide/template.html'
}, done);
});
/// General tasks -------------------------------------------------------------
// Build and compress CSS, JavaScript and other assets.
gulp.task('build',
gulp.parallel('css', 'scripts', 'images', 'copy', 'styleguide'));
// Watch for changes to static assets, Sass and JavaScript.
gulp.task('watch', function() {
gulp.watch(CONFIG.ASSETS_FILES.map(a => a.src),
gulp.series('copy', reload));
gulp.watch('assets/scss/**/*.scss',
gulp.series('sass'));
gulp.watch('assets/js/**/*.js',
gulp.series('javascript', reload));
gulp.watch('assets/img/**/*',
gulp.series('images', reload));
gulp.watch(['styleguide/*', '!styleguide/index.html'],
gulp.series('styleguide', reload));
});
// Run a development server and watch for file changes.
gulp.task('serve',
gulp.series(proxyServer, 'watch'));
// Run a preview server and watch for file changes.
gulp.task('serve:styleguide',
gulp.series(styleguideServer, 'watch'));
// Lint Sass and JavaScript sources.
gulp.task('lint',
gulp.parallel('lint:sass', 'lint:javascript'));
// An alias to the 'build' task.
gulp.task('default',
gulp.parallel('build'));
/// Internal tasks ------------------------------------------------------------
// Start a server with BrowserSync and proxify the application in.
function proxyServer(done) {
browser.init({
proxy: CONFIG.SERVER_PROXY,
port: CONFIG.SERVER_PORT,
serveStatic: [
{
route: '/styleguide',
dir: './styleguide'
}
],
ghostMode: false,
notify: false,
online: false
});
done();
}
// Start a server with BrowserSync with the styleguide.
function styleguideServer(done) {
browser.init({
server: {
baseDir: './styleguide',
routes: {
'/static': CONFIG.BUILD_PATH
}
},
port: CONFIG.SERVER_PORT,
ghostMode: false,
notify: false,
online: false
});
done();
}
// Reload the BrowserSync server.
function reload(done) {
browser.reload();
done();
}

26758
package-lock.json générée

Fichier diff supprimé car celui-ci est trop grand Voir la Diff

Voir le fichier

@ -5,10 +5,11 @@
"author": "Cliss XXI <francois.poulain@cliss21.org>",
"license": "AGPL-3.0+",
"scripts": {
"build": "gulp build",
"lint": "gulp lint",
"serve": "gulp serve",
"styleguide": "gulp serve:styleguide"
"build": "webpack --mode production --progress",
"dev": " webpack serve --mode development --progress --open",
"lint:css": "stylelint \"assets/scss/**/*.scss\"",
"lint:js": "eslint --report-unused-disable-directives assets/js/",
"lint": "npm-run-all --parallel lint:css lint:js"
},
"dependencies": {
"bootstrap": "~4.1.3",
@ -17,34 +18,33 @@
"popper.js": "^1.14.4"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"browser-sync": "^2.26.3",
"eslint": "^5.6.1",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.10.0",
"gulp-cli": "^2.0.1",
"gulp-eslint": "^5.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-stylelint": "^7.0.0",
"gulp-terser": "^1.0.1",
"merge-stream": "^1.0.1",
"style-sherpa": "^1.0.0",
"stylelint": "^9.6.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-order": "^1.0.0",
"stylelint-scss": "^3.3.1",
"vinyl-named": "^1.1.0",
"webpack": "^4.17.2",
"webpack-stream": "^5.1.1"
"@babel/core": "^7.16.0",
"@babel/eslint-parser": "^7.16.3",
"@babel/preset-env": "^7.16.4",
"autoprefixer": "^10.4.0",
"babel-loader": "^8.2.3",
"copy-webpack-plugin": "^10.0.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-xo": "^0.39.0",
"eslint-plugin-prettier": "^4.0.0",
"mini-css-extract-plugin": "^2.4.5",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.4",
"postcss-loader": "^6.2.1",
"prettier": "^2.5.0",
"sass": "^1.44.0",
"sass-loader": "^12.3.0",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-twbs-bootstrap": "^2.2.4",
"stylelint-prettier": "^1.2.0",
"terser-webpack-plugin": "^5.2.5",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"private": true
}

160
webpack.config.js Normal file
Voir le fichier

@ -0,0 +1,160 @@
/* eslint-env node */
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const CONFIG = {
// Proxy target of the BrowserSync'server
SERVER_PROXY: 'http://127.0.0.1:8000',
// Port on which the BrowserSync'server will listen
SERVER_PORT: 8090,
// Paths to entries which will be bundled
ENTRIES: {
main: [
'./assets/js/app.js',
'./assets/scss/fork-awesome.scss',
'./assets/scss/app.scss'
]
},
// Folders to create aliases for in JavaScript and SCSS
// See: https://webpack.js.org/concepts/entry-points/
ALIASES: {
// fonts: path.resolve(__dirname, 'assets/fonts'),
// styles: path.resolve(__dirname, 'assets/scss'),
},
// Path to other assets wich will be copied with copy-webpack-plugin
// See: https://www.npmjs.com/package/copy-webpack-plugin
COPY_PATTERNS: [
{ from: 'assets/img', to: 'img' },
],
// Path to the build output, which can safely be cleaned
BUILD_PATH: 'biohdf/static',
};
// Return Webpack configuration depending on the mode.
module.exports = function (_, argv) {
const isDev = argv.mode !== 'production';
const config = {
entry: CONFIG.ENTRIES,
output: {
clean: true,
filename: '[name].js',
chunkFilename: '[name].[contenthash].js',
path: path.resolve(__dirname, CONFIG.BUILD_PATH),
},
module: {
rules: [
{
test: /\.js$/,
use: { loader: 'babel-loader' },
resolve: {
alias: {
bootstrap: 'bootstrap/js/src',
},
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '',
},
},
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer'],
},
},
},
{ loader: 'sass-loader' },
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/resource',
generator: {
filename: 'img/[name][ext]',
},
},
{
test: /\.(woff2?|ttf|otf|eot)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]',
},
},
],
},
resolve: {
alias: CONFIG.ALIASES,
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].[contenthash].css',
}),
],
stats: true,
};
if (CONFIG.COPY_PATTERNS.length) {
config.plugins.push(
new CopyPlugin({
patterns: CONFIG.COPY_PATTERNS,
})
);
}
if (isDev) {
config.mode = 'development';
config.devtool = 'cheap-module-source-map';
config.watchOptions = {
aggregateTimeout: 1000,
};
config.devServer = {
devMiddleware: {
publicPath: '/static',
writeToDisk: true,
},
host: 'localhost',
port: CONFIG.SERVER_PORT,
proxy: {
context: (path) => !/^\/styleguide(\/|$)/.test(path),
target: CONFIG.SERVER_PROXY,
},
static: [
{
directory: path.join(__dirname, 'styleguide'),
publicPath: '/styleguide',
},
],
};
} else {
config.mode = 'production';
config.devtool = 'source-map';
config.optimization = {
minimizer: [
new TerserJSPlugin({ extractComments: false }),
new CssMinimizerPlugin(),
],
};
}
return config;
};