Implement Hugo Pipes to process sass and js. Gulp now only for lint.
This commit is contained in:
Fredrik Jonsson
parent
b763e4f514
commit
336b3156ca
1 changed files with 1343 additions and 1668 deletions
136
gulpfile.js
136
gulpfile.js
|
|
@ -1,7 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
var importOnce = require('node-sass-import-once');
|
||||
|
||||
var options = {};
|
||||
|
||||
// #############################
|
||||
|
|
@ -9,38 +7,20 @@ var options = {};
|
|||
// #############################
|
||||
|
||||
// The root paths are used to construct all the other paths in this
|
||||
// configuration. The "project" root path is where this gulpfile.js is located.
|
||||
// While Zen distributes this in the theme root folder, you can also put this
|
||||
// (and the package.json) in your project's root folder and edit the paths
|
||||
// accordingly.
|
||||
// configuration.
|
||||
options.rootPath = {
|
||||
project : __dirname + '/',
|
||||
theme : __dirname + '/'
|
||||
projectAssets : '../../assets/',
|
||||
themeAssets : __dirname + '/assets/'
|
||||
};
|
||||
|
||||
options.theme = {
|
||||
root : options.rootPath.theme,
|
||||
sass : options.rootPath.theme + 'assets/sass/',
|
||||
css : options.rootPath.theme + 'static/css/',
|
||||
js : options.rootPath.theme + 'assets/js/',
|
||||
js_dest : options.rootPath.theme + 'static/js/'
|
||||
};
|
||||
|
||||
// Define the node-sass configuration. The includePaths is critical!
|
||||
options.sass = {
|
||||
importer: importOnce,
|
||||
includePaths: [
|
||||
options.theme.sass,
|
||||
options.rootPath.project + 'node_modules/typey/stylesheets'
|
||||
options.path = {
|
||||
sass : [
|
||||
options.rootPath.themeAssets + 'sass/**/*.scss',
|
||||
options.rootPath.projectAssets + 'sass/**/*.scss'
|
||||
],
|
||||
outputStyle: 'expanded'
|
||||
};
|
||||
|
||||
// Define the paths to the JS files to lint.
|
||||
options.eslint = {
|
||||
files : [
|
||||
options.theme.js + '**/*.js',
|
||||
'!' + options.theme.js + '**/*.min.js'
|
||||
js : [
|
||||
options.rootPath.themeAssets + 'js/**/*.js',
|
||||
options.rootPath.projectAssets + 'js/**/*.js'
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -49,51 +29,20 @@ options.eslint = {
|
|||
options.gulpWatchOptions = {interval: 600};
|
||||
// options.gulpWatchOptions = {interval: 1000, mode: 'poll'};
|
||||
|
||||
|
||||
// Load Gulp and tools we will use.
|
||||
var gulp = require('gulp'),
|
||||
$ = require('gulp-load-plugins')(),
|
||||
del = require('del'),
|
||||
// gulp-load-plugins will report "undefined" error unless you load gulp-sass manually.
|
||||
sass = require('gulp-sass'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
touch = require('gulp-touch-cmd');
|
||||
|
||||
// The sass files to process.
|
||||
var sassFiles = [
|
||||
options.theme.sass + '**/*.scss',
|
||||
// Do not open Sass partials as they will be included as needed.
|
||||
'!' + options.theme.sass + '**/_*.scss'
|
||||
];
|
||||
|
||||
// Clean JS files.
|
||||
gulp.task('clean:js', function clean () {
|
||||
return del([
|
||||
options.theme.js_dest + '**/*.js'
|
||||
], {force: true});
|
||||
});
|
||||
|
||||
// Clean CSS files.
|
||||
gulp.task('clean:css', function clean () {
|
||||
return del([
|
||||
options.theme.css + '**/*.css',
|
||||
options.theme.css + '**/*.map'
|
||||
], {force: true});
|
||||
});
|
||||
|
||||
// Clean all directories.
|
||||
gulp.task('clean', gulp.series('clean:css'));
|
||||
var gulp = require('gulp');
|
||||
var $ = require('gulp-load-plugins')();
|
||||
|
||||
// Lint JavaScript.
|
||||
gulp.task('lint:js', function lint () {
|
||||
return gulp.src(options.eslint.files)
|
||||
return gulp.src(options.path.js)
|
||||
.pipe($.eslint())
|
||||
.pipe($.eslint.format());
|
||||
});
|
||||
|
||||
// Lint JavaScript and throw an error for a CI to catch.
|
||||
gulp.task('lint:js-with-fail', function lint () {
|
||||
return gulp.src(options.eslint.files)
|
||||
return gulp.src(options.path.js)
|
||||
.pipe($.eslint())
|
||||
.pipe($.eslint.format())
|
||||
.pipe($.eslint.failOnError());
|
||||
|
|
@ -101,14 +50,14 @@ gulp.task('lint:js-with-fail', function lint () {
|
|||
|
||||
// Lint Sass.
|
||||
gulp.task('lint:sass', function lint () {
|
||||
return gulp.src(options.theme.sass + '**/*.scss')
|
||||
return gulp.src(options.path.sass)
|
||||
.pipe($.sassLint())
|
||||
.pipe($.sassLint.format());
|
||||
});
|
||||
|
||||
// Lint Sass and throw an error for a CI to catch.
|
||||
gulp.task('lint:sass-with-fail', function lint () {
|
||||
return gulp.src(options.theme.sass + '**/*.scss')
|
||||
return gulp.src(options.path.sass)
|
||||
.pipe($.sassLint())
|
||||
.pipe($.sassLint.format())
|
||||
.pipe($.sassLint.failOnError());
|
||||
|
|
@ -117,61 +66,18 @@ gulp.task('lint:sass-with-fail', function lint () {
|
|||
// Lint Sass and JavaScript.
|
||||
gulp.task('lint', gulp.parallel('lint:sass', 'lint:js'));
|
||||
|
||||
//Build JS
|
||||
gulp.task('scripts', gulp.series('clean:js', function js () {
|
||||
return gulp.src(options.theme.js + '**/*.js')
|
||||
.pipe(gulp.dest(options.theme.js_dest))
|
||||
.pipe(touch());
|
||||
}));
|
||||
|
||||
gulp.task('scripts:production', gulp.series('scripts'));
|
||||
|
||||
// Build CSS.
|
||||
gulp.task('styles', gulp.series('clean:css', function css () {
|
||||
return gulp.src(sassFiles)
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe($.sourcemaps.write('./'))
|
||||
.pipe(gulp.dest(options.theme.css))
|
||||
.pipe(touch());
|
||||
}));
|
||||
|
||||
gulp.task('styles:production', gulp.series('clean:css', function css () {
|
||||
return gulp.src(sassFiles)
|
||||
.pipe(sass(options.sass).on('error', sass.logError))
|
||||
.pipe($.size({showFiles: true}))
|
||||
.pipe(cleanCSS())
|
||||
.pipe(gulp.dest(options.theme.css))
|
||||
.pipe(touch());
|
||||
}));
|
||||
|
||||
// Watch for changes and rebuild.
|
||||
gulp.task('watch:css', gulp.series('styles', function watch () {
|
||||
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('styles'));
|
||||
}));
|
||||
|
||||
gulp.task('watch:lint:sass', gulp.series('lint:sass', function watch () {
|
||||
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('lint:sass'));
|
||||
}));
|
||||
|
||||
gulp.task('watch:js', gulp.series('scripts', function watch () {
|
||||
return gulp.watch(options.eslint.files, options.gulpWatchOptions, gulp.series('scripts'));
|
||||
return gulp.watch(options.path.sass, options.gulpWatchOptions, gulp.series('lint:sass'));
|
||||
}));
|
||||
|
||||
gulp.task('watch:lint:js', gulp.series('lint:js', function watch () {
|
||||
return gulp.watch(options.eslint.files, options.gulpWatchOptions, gulp.series('lint:js'));
|
||||
return gulp.watch(options.path.js, options.gulpWatchOptions, gulp.series('lint:js'));
|
||||
}));
|
||||
|
||||
gulp.task('watch', gulp.parallel('watch:css', 'watch:lint:sass', 'watch:js', 'watch:lint:js'));
|
||||
gulp.task('watch:lint', gulp.parallel('watch:lint:sass', 'watch:lint:js'));
|
||||
|
||||
// Build everything.
|
||||
gulp.task('build', gulp.parallel('styles:production', 'scripts:production', 'lint'));
|
||||
gulp.task('watch', gulp.series('watch:lint'));
|
||||
|
||||
// The default task.
|
||||
gulp.task('default', gulp.series('build'));
|
||||
|
||||
|
||||
// Resources used to create this gulpfile.js:
|
||||
// - https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js
|
||||
// - https://github.com/dlmanning/gulp-sass/blob/master/README.md
|
||||
gulp.task('default', gulp.series('lint'));
|
||||
|
|
|
|||
Loading…
Reference in a new issue