Ich habe vieles in meinen Workflow übernommen, funktioniert super :-)
Seit ich Nunjucks im HTML-Teil mit verwende, muss ich immer 2x speichern damit die Änderung in der .njk-Datei korrekt über die .html-Datei im dest-Ordner über browsersync angezeigt wird.
Wo liegt der Fehler?
// Import everything important
const gulp = require(gulp);
const plumber = require(gulp-plumber);
const rename = require(gulp-rename);
const browserSync = require(browser-sync).create();
const gutil = require(gulp-util);
const sourcemaps = require(gulp-sourcemaps);
// For SASS -> CSS
const sass = require(gulp-sass);
const postcss = require(gulp-postcss);
const autoprefixer = require(autoprefixer);
const cssnano = require(cssnano);
const sassLint = require(gulp-sass-lint);
// HTML
const htmlmin = require(gulp-htmlmin);
const nunjucks = require(gulp-nunjucks);
// JavaScript/TypeScript
const browserify = require(gulp-browserify);
const babel = require(gulp-babel);
const jshint = require(gulp-jshint);
const uglify = require(gulp-uglify);
const concat = require(gulp-concat);
// Define Important Varaibles
const src = ./src;
const dest = ./dest;
// Function for serve the dev server in browser
const serve = (done) => {
browserSync.init({
server: {
baseDir: ${dest}
}
});
done();
};
// Function for reload the Browser
const reload = (done) => {
browserSync.reload();
done();
};
// Compile .html to minify .html
const html = () => {
// Nunjucks -> HTML
gulp.src(${src}/*.njk)
.pipe(nunjucks.compile())
.pipe(rename({ extname: .html }))
.pipe(gulp.dest(${src}));
// Find HTML
return gulp.src(${src}/*.html)
// Init Plumber
.pipe(plumber())
// HTML -> HTMLmin
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true,
html5: true,
removeEmptyAttributes: true,
removeTagWhitespace: true,
sortAttributes: true
}))
// Write everything to destination folder
.pipe(gulp.dest(${dest}));
};
// Compile SASS into CSS
const css = () => {
// Find SASS
return gulp.src(${src}/sass/**/*.sass)
// Init Plumber
.pipe(plumber())
// Lint SASS
.pipe(sassLint({
options: {
formatter: 'stylish',
},
rules: {
'no-ids': 1,
'final-newline': 0,
'no-mergeable-selectors': 1,
'indentation': 0
}
}))
// Format SASS
.pipe(sassLint.format())
// Start Source Map
.pipe(sourcemaps.init())
// Compile SASS -> CSS
.pipe(sass.sync({
outputStyle: compressed
})).on('error', sass.logError)
// Add Suffix
.pipe(rename({
basename: 'all',
suffix: '.min'
}))
// Add Autoprefixer & cssNano
.pipe(postcss([autoprefixer(), cssnano()]))
// Write Source Map
.pipe(sourcemaps.write(''))
// Write everything to destination folder
.pipe(gulp.dest(${dest}/assets/css))
// Reload Page
.pipe(browserSync.stream());
};
// Compile .js to minify .js
const script = () => {
// Find JavaScript
return gulp.src(${src}/assets/js/**/*.js)
// Init Plumber
.pipe(plumber(((error) => {
gutil.log(error.message);
})))
// Start using source maps
.pipe(sourcemaps.init())
// concat
.pipe(concat('concat.js'))
// Use Babel
.pipe(babel())
// JavaScript Lint
.pipe(jshint())
// Report of jslint
.pipe(jshint.reporter('jshint-stylish'))
// Add browser Support
.pipe(browserify({
insertGlobals: true
}))
// Minify
.pipe(uglify())
// add SUffix
.pipe(rename({
basename: 'all',
suffix: .min
}))
// Write Sourcemap
.pipe(sourcemaps.write(''))
// Write everything to destination folder
.pipe(gulp.dest(${dest}/assets/js))
// Update Browser
.pipe(browserSync.stream());
};
// Function to watch our Changes and refreash page
const watch = () => gulp.watch([${src}/*.njk, ${src}/sass/**/*.sass, ${src}/assets/js/**/*.js], gulp.parallel(html, css, script, reload));
// All Tasks for this Project
const dev = gulp.parallel(html, css, script, serve, watch);
// Just build the project
const build = gulp.series(html, css, script);
// Default function (used when type gulp)
exports.dev = dev;
exports.build = build;
exports.default = build;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent