umefarooq · May 21, 2023 14:07 · Oct 7, 2015 · Sep 22, 2015
diff --git a/browsersync.js b/browsersync.js
@@ -15,9 +15,9 @@ module.exports = function(gulp, plugins) {
 // -------------------------------------------- Start Task
     browserSync.init(config.browsersync.opts);
 
-    gulp.watch(config.sass.src, gulp.series('sass'));
-    gulp.watch(config.typescript.src, gulp.series('ts'));
-    gulp.watch(config.browsersync.watch).on('change', browserSync.reload);
+    browserSync.watch(config.sass.src, gulp.series('sass'));
+    browserSync.watch(config.typescript.src, gulp.series('ts'));
+    browserSync.watch(config.browsersync.watch).on('change', browserSync.reload);
 // ---------------------------------------------- End Task
     return stream;
     };

diff --git a/browsersync.js b/browsersync.js
@@ -0,0 +1,24 @@
+// =========================================================
+// 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('../config.js');
+var browserSync         = require('browser-sync').create();
+
+module.exports = function(gulp, plugins) {
+    return function () {
+    var stream = 
+// -------------------------------------------- Start Task
+    browserSync.init(config.browsersync.opts);
+
+    gulp.watch(config.sass.src, gulp.series('sass'));
+    gulp.watch(config.typescript.src, gulp.series('ts'));
+    gulp.watch(config.browsersync.watch).on('change', browserSync.reload);
+// ---------------------------------------------- End Task
+    return stream;
+    };
+};
diff --git a/clean.js b/clean.js
@@ -0,0 +1,18 @@
+// =========================================================
+// Gulp Task: clean
+// Description: deletes dist folder
+// npm install --save-del del gulp-load-plugins
+// =========================================================
+var config              = require('../config.js'),
+    del                 = require('del');
+
+module.exports = function(gulp, plugins) {
+    return function (cb) {
+    var stream = 
+// -------------------------------------------- Start Task
+        // del(config.clean.folders, cb);
+        del('./dist/', cb);
+// ---------------------------------------------- End Task
+    return stream;
+    };
+};
diff --git a/config.js b/config.js
@@ -0,0 +1,130 @@
+// =========================================================
+// Project: PROJECT-NAME
+// =========================================================
+// ------------------------------------------ Export Configs
+module.exports = {
+    production: false, // use to programmatically operate on 
+    // gulp tasks based on environment
+// -------------------------------------------- autoprefixer
+    autoprefixer: {
+        opts: {
+            browsers: ['last 3 versions']
+        }
+    },
+// --------------------------------------------- browsersync
+    browsersync: {
+        opts: {
+            server: './src/'
+        },
+        watch: [
+            './src/assets/styles/css/**/*.css',
+            './src/assets/scripts/js/**/*.js',
+            './src/**/*.html'
+        ]
+    },
+// --------------------------------------------------- clean
+    clean: {
+        folders: [
+            './dist/'
+        ]  
+    },
+    html: {
+        src: ['./src/**/*.html', '!src/assets/bin/**/*'],
+        htmlmin: { // In case more html file operations are needed.
+            opts: {
+                // https://github.com/kangax/html-minifier
+                collapseWhitespace: true,
+                removeComments: true
+            }
+        },
+        dest: './dist/'
+    },
+// ------------------------------------------------ new-task
+    newtask: {
+        src: [
+            "./gulp/utils/newTaskTemplate.js"
+        ],
+        outputName: "TASK-TEMPLATE.js",
+        dest: "./gulp/tasks/"
+    },
+// -------------------------------------------------- rename
+    rename: {
+        min: { suffix: '.min' }
+    },
+// ---------------------------------------------------- sass
+    sass: {
+        src: [
+            "./src/assets/styles/sass/**/*.{scss,sass}"
+        ],
+        opts: { }, // add sass options here
+        outputName: 'main.css',
+        dest: './src/assets/styles/css/'
+    },
+// ------------------------------------------------- scripts
+    scripts: {
+		src: [
+            './src/assets/scripts/js/**/*.js',
+    ],
+		dest: './dist/assets/js'
+	},
+// -------------------------------------------------- styles
+    styles: {
+        src: [
+            './src/assets/styles/css/**/*.css',
+        ],
+        dest: './dist/assets/css'
+    },
+// ---------------------------------------------- typescript
+    typescript: {
+        src: [
+            './src/assets/scripts/ts/**/*.ts'
+        ],
+        dest: './src/assets/scripts/js',
+        opts: {
+            noImplicitAny: true
+        }
+    },
+// ------------------------------------------------- vendors
+    vendors: {
+        js: {
+            src: [
+                './bower_components/bootstrap/dist/js/bootstrap.min.js',
+                './bower_components/jquery/dist/jquery.min.js',
+                './src/assets/bin/bootstrap-4.0.0-alpha/dist/js/bootstrap.min.js'
+            ],
+            dest: './dist/assets/js/vendors'
+        },
+        css: {
+            src: [
+                './bower_components/font-awesome/css/font-awesome.min.css',
+                './bower_components/font-awesome/css/font-awesome.css.map',
+                './bower_components/bootstrap/dist/css/bootstrap.min.css',
+                './bower_components/bootstrap/dist/css/bootstrap.min.css.map'
+            ],
+            dest: './dist/assets/css/vendors'
+        },
+        sass: {
+            // NOTE: This is to perform operations on the sass files
+            src: [
+                './bower_components/font-awesome/scss/**/*.scss', // ex
+                './src/assets/bin/bootstrap-4.0.0-alpha/scss/**/*.scss' // ex
+            ],
+            opts: { },
+            dest: './dist/assets/css/vendors'
+        },
+        less: {
+            src: [
+                './bower_components/bootstrap/less/**/*.less'
+            ],
+            opts: { },
+            dest: './dist/assets/css/vendors'
+        },
+        fonts: {
+            src: [
+             './bower_components/bootstrap/fonts/**/*.*',
+             './bower_components/font-awesome/fonts/**/*.*'
+            ],
+            dest: './dist/assets/fonts'
+        }
+    }
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,58 @@
+// =========================================================
+// Project: PROJECT-NAME
+// NOTE: Using Gulp 4
+// npm install --save-dev gulp-load-plugins gulpjs/gulp.git#4.0
+// =========================================================
+var gulp 		= require('gulp'),
+	config		= require('./gulp/config'),
+	plugins		= require('gulp-load-plugins')();
+
+// ---------------------------------- Gulp Terminal Commands
+// ---- gulp
+// ---- gulp build
+// ---- gulp new-task
+
+// --------------------function to get tasks from gulp/tasks
+function getTask(task) {
+	return require('./gulp/tasks/' + task)(gulp, plugins);
+}
+
+// ---------------------------------------------- Gulp Tasks
+gulp.task('sass',       getTask('sass'));
+gulp.task('scripts',    getTask('scripts'));
+gulp.task('styles',     getTask('styles'));
+gulp.task('ts',         getTask('typescript'));
+gulp.task('new-task',   getTask('new-task'));
+gulp.task('sync',       getTask('browsersync'));
+gulp.task('clean',      getTask('clean'));
+gulp.task('moveDist',   getTask('move-dist'));
+gulp.task('vendors',    getTask('vendors'));
+gulp.task('html',       getTask('html'));
+
+// --------------------------------------- Default Gulp Task
+gulp.task('default', gulp.series(
+	gulp.parallel('sass', 'ts'), 'sync')
+);
+
+// ---------------------------------------------- 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('build', gulp.series('clean',
+	gulp.parallel('scripts', 'styles', 'html'), 'vendors', 'moveDist')
+);
+
+
+// =========================================================
+// Basic example of gulp multifile tasks folder structure
+// =========================================================
+// **** Project-Directory/
+// ------ gulpfile.js
+// ****** src/
+// ****** dist/
+// ****** gulp/
+// -------- config.js
+// ******** tasks/
+// ******** utils/
+// ----------- newTaskTemplate.js
diff --git a/html.js b/html.js
@@ -0,0 +1,18 @@
+// =========================================================
+// Gulp Task: html
+// Description: minify html
+// Dependencies: npm install --save-dev gulp-htmlmin
+// =========================================================
+var config              = require('../config.js');
+
+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;
+    };
+};
diff --git a/move-dist.js b/move-dist.js
@@ -0,0 +1,18 @@
+// =========================================================
+// 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('../config.js');
+
+module.exports = function(gulp, plugins) {
+    return function () {
+    var stream = 
+// -------------------------------------------- Start Task
+    gulp.src('./dist/**/*.*')
+        .pipe(gulp.dest('./../gh-pages-site'));
+// ---------------------------------------------- End Task
+    return stream;
+    };
+};
diff --git a/new-task.js b/new-task.js
@@ -0,0 +1,18 @@
+// =========================================================
+// Gulp Task: newTask
+// Description: creates a new multifile task template
+// Dependencies: npm install gulp-rename gulp-load-plugins
+// =========================================================
+var config              = require('../config.js');
+
+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;
+    };
+};
diff --git a/newTaskTemplate.js b/newTaskTemplate.js
@@ -0,0 +1,16 @@
+// =========================================================
+// Gulp Task: 
+// Description: 
+// Dependencies: npm install 
+// =========================================================
+var config              = require('../config.js');
+
+module.exports = function(gulp, plugins) {
+    return function () {
+    var stream = 
+// -------------------------------------------- Start Task
+    gulp.src('')
+// ---------------------------------------------- End Task
+    return stream;
+    };
+};
diff --git a/sass.js b/sass.js
@@ -0,0 +1,21 @@
+// =========================================================
+// 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('../config.js');
+
+module.exports = function(gulp, plugins) {
+    return function () {
+    var stream = 
+// -------------------------------------------- Start Task
+    gulp.src(config.sass.src)
+    .pipe(plugins.sourcemaps.init())
+    .pipe(plugins.sass().on('error', plugins.sass.logError))
+    .pipe(plugins.autoprefixer(config.autoprefixer.opts))
+    .pipe(plugins.sourcemaps.write('.'))
+    .pipe(gulp.dest(config.sass.dest))
+// ---------------------------------------------- End Task
+    return stream;
+    };
+};
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,22 @@
+// =========================================================
+// 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('../config.js'),
+    merge               = require('merge-stream');
+
+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('.'))
+        .pipe(gulp.dest(config.dist.scripts.js));
+// ------------------------------------------------ End Task
+    return stream;
+    };
+};
diff --git a/styles.js b/styles.js
@@ -0,0 +1,21 @@
+// =========================================================
+// 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('../config.js');
+
+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('.'))
+        .pipe(gulp.dest(config.dist.styles.css));
+// ---------------------------------------------- End Task
+    return stream;
+    };
+};
diff --git a/typescript.js b/typescript.js
@@ -0,0 +1,19 @@
+// =========================================================
+// Gulp Task: typescript
+// Description: Transpile .ts files and add sourcemaps
+// npm install --save-dev gulp-typescript gulp-sourcemaps gulp-load-plugins
+// =========================================================
+var config              = require('../config.js');
+
+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('.')).pipe(gulp.dest(config.typescript.dest));
+    };
+};
diff --git a/vendors.js b/vendors.js
@@ -0,0 +1,48 @@
+// =========================================================
+// 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('../config.js'),
+    merge               = require('merge-stream');
+
+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
+    };
+};