293 lignes
6.8 KiB
JavaScript
293 lignes
6.8 KiB
JavaScript
/* eslint-env node */
|
|
|
|
const autoprefixer = require('autoprefixer');
|
|
const merge = require('merge-stream');
|
|
const rimraf = require('rimraf');
|
|
const sherpa = require('style-sherpa');
|
|
const named = require('vinyl-named');
|
|
const webpack = require('webpack');
|
|
const webpackStream = require('webpack-stream');
|
|
|
|
const gulp = require('gulp');
|
|
const plugins = require('gulp-load-plugins');
|
|
|
|
const browser = require('browser-sync').create();
|
|
|
|
// Load all Gulp plugins into one variable
|
|
const $ = plugins({
|
|
rename: {
|
|
'gulp-touch-fd': 'touch'
|
|
}
|
|
});
|
|
|
|
/// 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: ''
|
|
},
|
|
{
|
|
// Open Sans
|
|
src: 'node_modules/open-sans-fonts/open-sans/{Bold*,Italic,Regular,Semibold*}/*',
|
|
dest: 'fonts/open-sans'
|
|
},
|
|
{
|
|
// 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/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 can safely be be cleaned
|
|
BUILD_PATH: 'services_pour_tous/static'
|
|
};
|
|
|
|
/// CSS -----------------------------------------------------------------------
|
|
|
|
// Compile Sass into CSS.
|
|
function cssTranspile() {
|
|
return gulp.src(CONFIG.SASS_ENTRIES)
|
|
.pipe($.sourcemaps.init())
|
|
.pipe($.sass({
|
|
includePaths: CONFIG.SASS_INCLUDE_PATHS
|
|
}).on('error', $.sass.logError))
|
|
.pipe($.postcss([
|
|
autoprefixer()
|
|
]))
|
|
.pipe($.sourcemaps.write('.'))
|
|
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/css`))
|
|
.pipe($.touch())
|
|
.pipe(browser.reload({ stream: true }));
|
|
}
|
|
|
|
// Lint Sass files.
|
|
function cssLint() {
|
|
return gulp.src('assets/scss/**/*.scss')
|
|
.pipe($.stylelint({
|
|
failAfterError: true,
|
|
reporters: [
|
|
{ formatter: 'verbose', console: true }
|
|
]
|
|
}));
|
|
}
|
|
|
|
// Compress CSS files.
|
|
function cssMinify() {
|
|
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`));
|
|
}
|
|
|
|
exports.css = gulp.series(cssTranspile, cssMinify);
|
|
|
|
/// JavaScript ----------------------------------------------------------------
|
|
|
|
const webpackConfig = {
|
|
devtool: 'source-map',
|
|
mode: 'development',
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /.js$/,
|
|
use: {
|
|
loader: 'babel-loader',
|
|
options: {
|
|
presets: ['@babel/preset-env'],
|
|
compact: false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
stats: {
|
|
chunks: false,
|
|
entrypoints: false
|
|
}
|
|
};
|
|
|
|
// Bundle JavaScript module.
|
|
function jsBundle() {
|
|
return gulp.src(CONFIG.JS_ENTRIES)
|
|
.pipe(named())
|
|
.pipe(webpackStream(webpackConfig, webpack))
|
|
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/js`));
|
|
}
|
|
|
|
// Lint JavaScript source files.
|
|
function jsLint() {
|
|
return gulp.src('assets/js/**/*.js')
|
|
.pipe($.eslint())
|
|
.pipe($.eslint.format())
|
|
.pipe($.eslint.failAfterError());
|
|
}
|
|
|
|
// Compress JavaScript files.
|
|
function jsMinify() {
|
|
return gulp.src([
|
|
`${CONFIG.BUILD_PATH}/js/*.js`,
|
|
`!${CONFIG.BUILD_PATH}/js/*.min.js`
|
|
])
|
|
.pipe($.terser())
|
|
.pipe($.rename({ suffix: '.min' }))
|
|
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/js`));
|
|
}
|
|
|
|
exports.js = gulp.series(jsBundle, jsMinify);
|
|
|
|
/// Other assets --------------------------------------------------------------
|
|
|
|
// Compress and copy images.
|
|
function images() {
|
|
return gulp.src(CONFIG.IMAGES_FILES)
|
|
.pipe($.imagemin({ progressive: true }))
|
|
.pipe(gulp.dest(`${CONFIG.BUILD_PATH}/img`));
|
|
}
|
|
|
|
// Copy other assets files.
|
|
function assets() {
|
|
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.
|
|
function styleguide(done) {
|
|
sherpa('styleguide/index.md', {
|
|
output: 'styleguide/index.html',
|
|
template: 'styleguide/template.html'
|
|
}, done);
|
|
}
|
|
|
|
/// BrowserSync servers -------------------------------------------------------
|
|
|
|
// 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: '/static',
|
|
dir: CONFIG.BUILD_PATH
|
|
},
|
|
{
|
|
route: '/styleguide',
|
|
dir: './styleguide'
|
|
}
|
|
],
|
|
ghostMode: false,
|
|
notify: 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
|
|
});
|
|
|
|
done();
|
|
}
|
|
|
|
/// Utils ---------------------------------------------------------------------
|
|
|
|
function clean(done) {
|
|
rimraf(CONFIG.BUILD_PATH, done);
|
|
}
|
|
|
|
// Reload the BrowserSync server.
|
|
function reload(done) {
|
|
browser.reload();
|
|
done();
|
|
}
|
|
|
|
// Watch for changes to static assets, Sass and JavaScript.
|
|
function watch() {
|
|
gulp.watch('assets/scss/**/*.scss',
|
|
gulp.series(exports.css));
|
|
gulp.watch('assets/js/**/*.js',
|
|
gulp.series(exports.js, reload));
|
|
|
|
gulp.watch(CONFIG.IMAGES_FILES,
|
|
gulp.series(images, reload));
|
|
|
|
gulp.watch([].concat(...CONFIG.ASSETS_FILES.map(a => a.src)),
|
|
gulp.series(assets, reload));
|
|
|
|
gulp.watch(['styleguide/*', '!styleguide/index.html'],
|
|
gulp.series(styleguide, reload));
|
|
}
|
|
|
|
/// General tasks -------------------------------------------------------------
|
|
|
|
// Build and compress CSS, JavaScript and other assets.
|
|
exports.build = gulp.series(
|
|
clean,
|
|
gulp.parallel(cssTranspile, jsBundle),
|
|
gulp.parallel(cssMinify, jsMinify),
|
|
gulp.parallel(images, assets),
|
|
styleguide
|
|
);
|
|
|
|
// Run a development server and watch for file changes.
|
|
exports.serve = gulp.series(proxyServer, watch);
|
|
|
|
// Run a preview server and watch for file changes.
|
|
exports.styleguide = gulp.series(styleguideServer, watch);
|
|
|
|
// Lint Sass and JavaScript sources.
|
|
exports.lint = gulp.parallel(cssLint, jsLint);
|
|
|
|
// An alias to the 'build' task.
|
|
exports.default = exports.build;
|