ref(assets): passe à webpack-dev-server
Parent
02ecc389a1
révision
dd9f4cefed
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é.
|
@ -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: "";
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
265
gulpfile.js
265
gulpfile.js
|
@ -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();
|
||||
}
|
Fichier diff supprimé car celui-ci est trop grand
Voir la Diff
64
package.json
64
package.json
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
};
|
Chargement…
Référencer dans un nouveau ticket