I'd like to set up a general example of configuring Gulp for a new project.

Additional Posts

Basic gulpfile.js

Here's a work in progress example of a basic gulp. This style uses configuration instead of individual jobs.

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var minify = require('gulp-minify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var cleancss = require('gulp-clean-css');
var ts = require('gulp-typescript');

var compileFiles = [
    {
        name: "", //bundle-name
        type: "", // scripts|styles
        input: [], // array of input globs/files
        output: "" // output directory 
    }
];

gulp.task("build-js", function (done) {
    var processList = [];
    for (let scriptSet of compileFiles.filter(x => x.type.toLowerCase() === "scripts")) {
        gulp.task(scriptSet.name, ProcessJs(scriptSet.input, scriptSet.output));
        processList.push(scriptSet.name);
    }
    gulp.series(processList)();
    done();
});

gulp.task("build-css", function (done) {
    var processList = [];
    for (let scriptSet of compileFiles.filter(x => x.type.toLowerCase() === "styles")) {
        gulp.task(scriptSet.name, ProcessCss(scriptSet.input, scriptSet.output));
        processList.push(scriptSet.name);
    }
    gulp.series(processList)();
    done();
});

function ProcessJs(input, output) {
    return function () {
        return gulp.src(input)
            .pipe(sourcemaps.init())
            .pipe(concat('main.js'))
            .pipe(minify({
                ext: {
                    min: '.min.js'
                }
            }))
            .pipe(sourcemaps.write(output))
            .pipe(gulp.dest(output));
    }
}

function ProcessCss(inputPath, outputPath) {
    return function () {
        var a = gulp.src(inputPath, { sourcemaps: true })
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(postcss([autoprefixer()]))
            .pipe(cleancss({ compatibility: 'ie11' }))
            .pipe(gulp.dest(outputPath, { sourcemaps: '.' }));
        return a;
    };
}

//    gulp.watch('Mercury.Web/Static/**/*.scss', gulp.series('sass-international'));

gulp.task('watch');
gulp.task('watch-css');
gulp.task('watch-js');

//gulp.task('build');
//gulp.task('build-css');
gulp.task('build-jss');


// Build is the task used by Jenkins, beware
gulp.task('build', gulp.series(['build-css', 'build-js']));

Example Config (for GWB)

var compileFiles = [
    {
        name: "GWB",
        type: "scripts",
        input: [],
        output: ""
    }, {
        name: "GWB",
        type: "styles",
        input: ['./GreatWesternBank/Static/scss/main.scss'],
        output: './GreatWesternBank/Static/'
    },
    {
        name: 'Amp',
        type: 'styles',
        input: ['./GreatWesternBank/Static/Amp/scss/main.scss'],
        output: './GreatWesternBank/Static/Amp/'
    }
];

Package.json dependency section

  "dependencies": {
    "autoprefixer": "^9.7.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.2.0",
    "gulp-insert": "^0.5.0",
    "gulp-minify": "^3.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-typescript": "^5.0.1",
    "typescript": "^3.6.4"
  }

Comments

• This could use more info on what a gulpfile actually does, and where it should go etc. This has good info for what to put into a gulp file, but this assumes the project already has gulp set up.@JohnPavek