Page Menu
Home
DevCentral
Search
Configure Global Search
Log In
Files
F11722833
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
7 KB
Referenced Files
None
Subscribers
None
View Options
diff --git a/components/gulpfile.js b/components/gulpfile.js
index b2e5edf..ad2ef0c 100644
--- a/components/gulpfile.js
+++ b/components/gulpfile.js
@@ -1,160 +1,164 @@
'use strict';
import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import named from 'vinyl-named';
import uncss from 'uncss';
import autoprefixer from 'autoprefixer';
+var sass = require('gulp-sass')(require('sass'));
+
// Load all Gulp plugins into one variable
const $ = plugins();
// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);
// Load settings from config.yml
const config = loadConfig();
function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}
// Build the "dist" folder by running all of the below tasks
// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
- gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass));
+ gulp.series(clean, gulp.parallel(pages, javascript, images, copy), compileSass));
// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(config.paths.dist, done);
}
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
- return gulp.src(build_paths.assets)
+ return gulp.src(config.paths.assets)
.pipe(gulp.dest(config.paths.dist + '/assets'));
}
// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(config.paths.dist));
}
// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}
// Compile Sass into CSS
// In production, the CSS is compressed
-function sass() {
+function compileSass() {
const postCssPlugins = [
autoprefixer(),
PRODUCTION && uncss.postcssPlugin(config.tasks.uncss),
].filter(Boolean);
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
- .pipe($.sass({
+ .pipe(sass({
includePaths: config.paths.sass
})
- .on('error', $.sass.logError))
+ .on('error', sass.logError))
.pipe($.postcss(postCssPlugins))
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(config.paths.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}
let webpackConfig = {
mode: (PRODUCTION ? 'production' : 'development'),
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ "@babel/preset-env" ],
compact: false
}
}
}
]
},
devtool: !PRODUCTION && 'source-map'
}
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(config.paths.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(config.paths.dist + '/assets/js'));
}
// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
.pipe($.if(PRODUCTION, $.imagemin([
- $.imagemin.jpegtran({ progressive: true }),
+ $.imagemin.gifsicle({interlaced: true}),
+ $.imagemin.mozjpeg({quality: 80, progressive: true}),
+ $.imagemin.optipng({optimizationLevel: 7}),
])))
.pipe(gulp.dest(config.paths.dist + '/assets/img'));
}
// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: config.paths.dist, port: config.dev.port
}, done);
}
// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(config.paths.assets, copy);
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
- gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
+ gulp.watch('src/assets/scss/**/*.scss').on('all', compileSass);
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
}
diff --git a/components/package-template.json b/components/package-template.json
index ee17d60..f029f5b 100644
--- a/components/package-template.json
+++ b/components/package-template.json
@@ -1,47 +1,48 @@
{
"main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"dependencies": {
"foundation-sites": "~6.4.1",
"jquery": ">=3.0.0",
- "what-input": "^4.1.3",
- "motion-ui": "^2.0.3"
+ "motion-ui": "^2.0.3",
+ "what-input": "^4.1.3"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
- "gulp-imagemin": "^4.1.0",
+ "gulp-imagemin": "^7.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
- "gulp-sass": "^4.0.1",
+ "gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
+ "sass": "^1.41.1",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
- "webpack": "^4.20.2",
- "webpack-stream": "^5.1.1",
- "yargs": "^12.0.2"
+ "webpack": "^5.53.0",
+ "webpack-stream": "^7.0.0",
+ "yargs": "^17.1.1"
},
"bugs": {
"url": "https://devcentral.nasqueron.org/"
},
"private": true
}
File Metadata
Details
Attached
Mime Type
text/x-diff
Expires
Thu, Sep 18, 05:53 (16 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2990074
Default Alt Text
(7 KB)
Attached To
Mode
rUPSECTION Upsection
Attached
Detach File
Event Timeline
Log In to Comment