javascriptGulp4具有外部配置的多文件任务。使用gulploadplugins的基本gulpfile模板，用于多个任务文件

// =========================================================
// Gulp Task: browsersync
// NOTE: Using gulp v4
// Description: Sync sass, typescript, html, and browser
// using external config or add modify src
// npm install --save-dev browser-sync gulp-typescript gulpjs/gulp.git#4.0 gulp-load-plugins
// Options: node-sass gulp-sass || gulp-ruby-sass
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
var browserSync = require(&＃39;browser-sync&＃39;).create();
module.exports = function(gulp, plugins) {
return function () {
var stream =
// -------------------------------------------- Start Task
browserSync.init(config.browsersync.opts);
browserSync.watch(config.sass.src, gulp.series(&＃39;sass&＃39;));
browserSync.watch(config.typescript.src, gulp.series(&＃39;ts&＃39;));
browserSync.watch(config.browsersync.watch).on(&＃39;change&＃39;, browserSync.reload);
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Gulp Task: clean
// Description: deletes dist folder
// npm install --save-del del gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;),
del = require(&＃39;del&＃39;);
module.exports = function(gulp, plugins) {
return function (cb) {
var stream =
// -------------------------------------------- Start Task
// del(config.clean.folders, cb);
del(&＃39;./dist/&＃39;, cb);
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Project: PROJECT-NAME
// =========================================================
// ------------------------------------------ Export Configs
module.exports = {
production: false, // use to programmatically operate on
// gulp tasks based on environment
// -------------------------------------------- autoprefixer
autoprefixer: {
opts: {
browsers: [&＃39;last 3 versions&＃39;]
}
},
// --------------------------------------------- browsersync
browsersync: {
opts: {
server: &＃39;./src/&＃39;
},
watch: [
&＃39;./src/assets/styles/css/**/*.css&＃39;,
&＃39;./src/assets/scripts/js/**/*.js&＃39;,
&＃39;./src/**/*.html&＃39;
]
},
// --------------------------------------------------- clean
clean: {
folders: [
&＃39;./dist/&＃39;
]
},
html: {
src: [&＃39;./src/**/*.html&＃39;, &＃39;!src/assets/bin/**/*&＃39;],
htmlmin: { // In case more html file operations are needed.
opts: {
// https://github.com/kangax/html-minifier
collapseWhitespace: true,
removeComments: true
}
},
dest: &＃39;./dist/&＃39;
},
// ------------------------------------------------ new-task
newtask: {
src: [
"./gulp/utils/newTaskTemplate.js"
],
outputName: "TASK-TEMPLATE.js",
dest: "./gulp/tasks/"
},
// -------------------------------------------------- rename
rename: {
min: { suffix: &＃39;.min&＃39; }
},
// ---------------------------------------------------- sass
sass: {
src: [
"./src/assets/styles/sass/**/*.{scss,sass}"
],
opts: { }, // add sass options here
outputName: &＃39;main.css&＃39;,
dest: &＃39;./src/assets/styles/css/&＃39;
},
// ------------------------------------------------- scripts
scripts: {
src: [
&＃39;./src/assets/scripts/js/**/*.js&＃39;,
],
dest: &＃39;./dist/assets/js&＃39;
},
// -------------------------------------------------- styles
styles: {
src: [
&＃39;./src/assets/styles/css/**/*.css&＃39;,
],
dest: &＃39;./dist/assets/css&＃39;
},
// ---------------------------------------------- typescript
typescript: {
src: [
&＃39;./src/assets/scripts/ts/**/*.ts&＃39;
],
dest: &＃39;./src/assets/scripts/js&＃39;,
opts: {
noImplicitAny: true
}
},
// ------------------------------------------------- vendors
vendors: {
js: {
src: [
&＃39;./bower_components/bootstrap/dist/js/bootstrap.min.js&＃39;,
&＃39;./bower_components/jquery/dist/jquery.min.js&＃39;,
&＃39;./src/assets/bin/bootstrap-4.0.0-alpha/dist/js/bootstrap.min.js&＃39;
],
dest: &＃39;./dist/assets/js/vendors&＃39;
},
css: {
src: [
&＃39;./bower_components/font-awesome/css/font-awesome.min.css&＃39;,
&＃39;./bower_components/font-awesome/css/font-awesome.css.map&＃39;,
&＃39;./bower_components/bootstrap/dist/css/bootstrap.min.css&＃39;,
&＃39;./bower_components/bootstrap/dist/css/bootstrap.min.css.map&＃39;
],
dest: &＃39;./dist/assets/css/vendors&＃39;
},
sass: {
// NOTE: This is to perform operations on the sass files
src: [
&＃39;./bower_components/font-awesome/scss/**/*.scss&＃39;, // ex
&＃39;./src/assets/bin/bootstrap-4.0.0-alpha/scss/**/*.scss&＃39; // ex
],
opts: { },
dest: &＃39;./dist/assets/css/vendors&＃39;
},
less: {
src: [
&＃39;./bower_components/bootstrap/less/**/*.less&＃39;
],
opts: { },
dest: &＃39;./dist/assets/css/vendors&＃39;
},
fonts: {
src: [
&＃39;./bower_components/bootstrap/fonts/**/*.*&＃39;,
&＃39;./bower_components/font-awesome/fonts/**/*.*&＃39;
],
dest: &＃39;./dist/assets/fonts&＃39;
}
}
}

// =========================================================
// Project: PROJECT-NAME
// NOTE: Using Gulp 4
// npm install --save-dev gulp-load-plugins gulpjs/gulp.git#4.0
// =========================================================
var gulp = require(&＃39;gulp&＃39;),
cOnfig= require(&＃39;./gulp/config&＃39;),
plugins = require(&＃39;gulp-load-plugins&＃39;)();
// ---------------------------------- Gulp Terminal Commands
// ---- gulp
// ---- gulp build
// ---- gulp new-task
// --------------------function to get tasks from gulp/tasks
function getTask(task) {
return require(&＃39;./gulp/tasks/&＃39; + task)(gulp, plugins);
}
// ---------------------------------------------- Gulp Tasks
gulp.task(&＃39;sass&＃39;, getTask(&＃39;sass&＃39;));
gulp.task(&＃39;scripts&＃39;, getTask(&＃39;scripts&＃39;));
gulp.task(&＃39;styles&＃39;, getTask(&＃39;styles&＃39;));
gulp.task(&＃39;ts&＃39;, getTask(&＃39;typescript&＃39;));
gulp.task(&＃39;new-task&＃39;, getTask(&＃39;new-task&＃39;));
gulp.task(&＃39;sync&＃39;, getTask(&＃39;browsersync&＃39;));
gulp.task(&＃39;clean&＃39;, getTask(&＃39;clean&＃39;));
gulp.task(&＃39;moveDist&＃39;, getTask(&＃39;move-dist&＃39;));
gulp.task(&＃39;vendors&＃39;, getTask(&＃39;vendors&＃39;));
gulp.task(&＃39;html&＃39;, getTask(&＃39;html&＃39;));
// --------------------------------------- Default Gulp Task
gulp.task(&＃39;default&＃39;, gulp.series(
gulp.parallel(&＃39;sass&＃39;, &＃39;ts&＃39;), &＃39;sync&＃39;)
);
// ---------------------------------------------- gulp build
// vendors - task which moves and operates on node_modules
// and bower_components dependencies
// moveDist: moves dist folder to another location
// on the file system (useful for multiple repos e.g. gh-pages)
gulp.task(&＃39;build&＃39;, gulp.series(&＃39;clean&＃39;,
gulp.parallel(&＃39;scripts&＃39;, &＃39;styles&＃39;, &＃39;html&＃39;), &＃39;vendors&＃39;, &＃39;moveDist&＃39;)
);
// =========================================================
// Basic example of gulp multifile tasks folder structure
// =========================================================
// **** Project-Directory/
// ------ gulpfile.js
// ****** src/
// ****** dist/
// ****** gulp/
// -------- config.js
// ******** tasks/
// ******** utils/
// ----------- newTaskTemplate.js

// =========================================================
// Gulp Task: html
// Description: minify html
// Dependencies: npm install --save-dev gulp-htmlmin
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
module.exports = function(gulp, plugins) {
return function () {
var stream =
// -------------------------------------------- Start Task
gulp.src(config.html.src)
.pipe(plugins.htmlmin(config.html.htmlmin.opts))
.pipe(gulp.dest(config.html.dest));
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Gulp Task: moveDist
// Description: move dist folder to external folder. Useful
// for multirepo projects. e.g. a gh-pages-site.
// npm install --save-dev gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
module.exports = function(gulp, plugins) {
return function () {
var stream =
// -------------------------------------------- Start Task
gulp.src(&＃39;./dist/**/*.*&＃39;)
.pipe(gulp.dest(&＃39;./../gh-pages-site&＃39;));
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Gulp Task: newTask
// Description: creates a new multifile task template
// Dependencies: npm install gulp-rename gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
module.exports = function(gulp, plugins) {
return function() {
var stream =
// -------------------------------------------- Start Task
gulp.src(config.newtask.src)
.pipe(plugins.rename(config.newtask.outputName))
.pipe(gulp.dest(config.newtask.dest));
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Gulp Task:
// Description:
// Dependencies: npm install
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
module.exports = function(gulp, plugins) {
return function () {
var stream =
// -------------------------------------------- Start Task
gulp.src(&＃39;&＃39;)
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Gulp Task: sass
// Description: transpiles sass, adds sourcemaps, prefixes
// npm install --save-dev node-sass gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
module.exports = function(gulp, plugins) {
return function () {
var stream =
// -------------------------------------------- Start Task
gulp.src(config.sass.src)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass().on(&＃39;error&＃39;, plugins.sass.logError))
.pipe(plugins.autoprefixer(config.autoprefixer.opts))
.pipe(plugins.sourcemaps.write(&＃39;.&＃39;))
.pipe(gulp.dest(config.sass.dest))
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Gulp Task: scripts
// Description: uglify all js, add sourcemaps, rename
// npm install --save-dev gulp-uglify gulp-rename gulp-sourcemaps merge-stream gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;),
merge = require(&＃39;merge-stream&＃39;);
module.exports = function(gulp, plugins) {
return function () {
// -------------------------------------------------- src js
var stream =
gulp.src(config.scripts.src)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.uglify())
.pipe(plugins.rename(config.rename.min))
.pipe(plugins.sourcemaps.write(&＃39;.&＃39;))
.pipe(gulp.dest(config.dist.scripts.js));
// ------------------------------------------------ End Task
return stream;
};
};

// =========================================================
// Gulp Task: styles
// Description: minify all css, add sourcemaps, rename
// Dependencies: npm install --save-dev gulp-minify-css gulp-rename gulp-sourcemaps gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
module.exports = function(gulp, plugins) {
return function () {
var stream =
// -------------------------------------------- Start Task
gulp.src(config.styles.src)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.minifyCss())
.pipe(plugins.rename(config.rename.min))
.pipe(plugins.sourcemaps.write(&＃39;.&＃39;))
.pipe(gulp.dest(config.dist.styles.css));
// ---------------------------------------------- End Task
return stream;
};
};

// =========================================================
// Gulp Task: typescript
// Description: Transpile .ts files and add sourcemaps
// npm install --save-dev gulp-typescript gulp-sourcemaps gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;);
module.exports = function(gulp, plugins) {
return function () {
var stream =
// -------------------------------------------- Start Task
gulp.src(config.typescript.src)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.typescript(config.typescript.opts));
// ---------------------------------------------- End Task
return stream.js.pipe(plugins.sourcemaps.write(&＃39;.&＃39;)).pipe(gulp.dest(config.typescript.dest));
};
};

// =========================================================
// Gulp Task: vendors
// Description: move all node and bower dependencies to dist
// easily add sass, less, etc. Operate on each as needed.
// basic configuration supplied
// npm install --save-dev merge-stream gulp-newer
// gulp-load-plugins
// =========================================================
var cOnfig= require(&＃39;../config.js&＃39;),
merge = require(&＃39;merge-stream&＃39;);
module.exports = function(gulp, plugins) {
return function () {
// ---------------------------------------------- Start Task
// ---- move js files
var js =
gulp.src(config.vendors.js.src)
.pipe(plugins.newer(config.vendors.js.dest))
.pipe(gulp.dest(config.vendors.js.dest));
// ---- move css files
var css =
gulp.src(config.vendors.css.src)
.pipe(plugins.newer(config.vendors.css.dest))
.pipe(gulp.dest(config.vendors.css.dest));
// ---- move font files
var fOnts=
gulp.src(config.vendors.fonts.src)
.pipe(plugins.newer(config.vendors.fonts.dest))
.pipe(gulp.dest(config.vendors.fonts.dest));

// ---- sass
// var sass =
// gulp.src(config.vendors.sass.src)
// .pipe(plugins.newer(config.vendors.sass.dest))
// .pipe(gulp.dest(config.vendors.sass.dest));
// ---- less
// var sass =
// gulp.src(config.vendors.less.src)
// .pipe(plugins.newer(config.vendors.less.dest))
// .pipe(gulp.dest(config.vendors.less.dest));
// ------------------------------------------------ End Task
return merge( js, css, fonts ); // add sass and/or less
};
};