Merge branch 'dev'

README.md

@@ -14,8 +14,8 @@
 ## Quickstart
 On this repo you can find some boilerplates based on Gulp, each branch has a different example.
 We try not only to use Gulp, also to use best practises and real examples that we can use on real projects.
-- **master:** Stable version of a basic and generic example. [Finishing]
-- **dev:** Dev version of a basic and generic example.
+- **[master](https://github.com/CKGrafico/Gulp-Boilerplates/tree/master):** Stable version of a basic and generic example. [Done]
+- **[dev](https://github.com/CKGrafico/Gulp-Boilerplates/tree/dev):** Dev version of a basic and generic example.
 - **node-master:** Stable version of node-based example. [To do]
 - **node-dev:** Dev version of node-based example.
 - **ng2-master:** Stable version of angular2-based example. [To do]
@@ -62,12 +62,11 @@ On this branch _(Basic)_ we use:
 - **Gulp Sourcemaps:** Generate Sourcemaps when is necessary.
 - **Gulp Uglify:** Minify and obfuscate JavaScript.
 - **Opn:** Open browser to see the preview.
-- **Require tasks:** Load all gulp tasks once.
+- **Require all:** Load all gulp tasks once.
 - **Rollup Babel:** To use Babel with Rollup _(ES2015 -> ES5)_.
 - **Require CommonJS:** Uses CommonJS for modules.
 - **Require Inject:** Include external dependencies to our code.
 - **Require Node Resolve:** Uses node resolution for path names.
-- **Run Secuence:** Using instead of gulp series (migrating to this)
 - **Yarn:** Instead of NPM.
 
 **[⬆ back to top](#table-of-contents)**
@@ -157,16 +156,17 @@ On this branch _(Basic)_ the structure is:`
 This is how we configured the main file:
 ```
 // We load all the tasks and pass some parameters
-require('require-tasks')(['tasks'])(gulp, paths, $, _);
+let tasks = require('require.all')('./tasks');
+tasks((name, task) => { func = () => task(gulp, paths, $, _, tasks); func.displayName = name; return func});
 // paths is for all the project paths
 // $ is for plugins
 // _ is for helpers
 ```
 
 And these are the only two tasks:
 ```
-gulp.task('default', () => _.series('scss-lint', 'scss', 'scripts-lint', 'scripts', 'copy', 'assets'));
-gulp.task('watcher', () => _.series('serve', 'watch'));
+gulp.task('default', gulp.series(tasks.clean, tasks.scssLint, tasks.scss, tasks.scriptsLint, tasks.scripts, tasks.copy, tasks.assets));
+gulp.task('watcher', gulp.parallel(tasks.serve, tasks.watch));
 ```
 
 **[⬆ back to top](#table-of-contents)**
@@ -191,11 +191,6 @@ _.files(paths.app.scripts, _.NOT)
 ```
 Exclude scripts, example: _'!./app/js/**/*.js'_
 
-```
-_.series('serve', 'watch'));
-```
-Use run-sequence to run tasks like gulp-series (we are migrating).
-
 **[⬆ back to top](#table-of-contents)**
 
 ## Gulpfile paths

gulpfile.helpers.js

@@ -1,6 +1,5 @@
 const paths = require('./gulpfile.paths');
 const gulp = require('gulp');
-const sequence = require('run-sequence');
 const noop = require('gulp-noop');
 const NOT = true;
 
@@ -17,10 +16,6 @@ module.exports = {
         return not === NOT ? '!' + path._folder : path._folder;
     },
 
-    series: (...tasks) => {
-        return sequence.apply(this, tasks)
-    },
-
     parsePath: (paths) => {
         let parser = (obj, parent) => {
             if (parent) {

gulpfile.js

@@ -6,9 +6,9 @@ const $ = require('gulp-load-plugins')();
 const paths = require('./gulpfile.paths');
 const _ = require('./gulpfile.helpers');
 
-// Import tasks
-require('require-tasks')(['tasks'])(gulp, paths, $, _);
+let tasks = require('require.all')('./tasks');
+tasks((name, task) => { func = () => task(gulp, paths, $, _, tasks); func.displayName = name; return func});
 
 // Configure gulp tasks
-gulp.task('default', () => _.series('scss-lint', 'scss', 'scripts-lint', 'scripts', 'copy', 'assets'));
-gulp.task('watcher', () => _.series('serve', 'watch'));
+gulp.task('default', gulp.series(tasks.clean, tasks.scssLint, tasks.scss, tasks.scriptsLint, tasks.scripts, tasks.copy, tasks.assets));
+gulp.task('watcher', gulp.parallel(tasks.serve, tasks.watch));

package.json

@@ -2,9 +2,7 @@
   "name": "myapp",
   "version": "1.0.0",
   "scripts": {
-    "predev": "gulp clean",
     "dev": "gulp --env=development",
-    "preprod": "gulp clean",
     "prod": "gulp --env=production",
     "prewatch": "npm run dev",
     "watch": "gulp --env=development watcher"
@@ -14,7 +12,7 @@
     "babel-plugin-external-helpers": "^6.18.0",
     "babel-preset-es2015": "^6.18.0",
     "del": "^2.2.2",
-    "gulp": "^3.9.1",
+    "gulp": "github:gulpjs/gulp#4.0",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-clean-css": "^2.3.2",
     "gulp-connect": "^5.0.0",
@@ -31,12 +29,11 @@
     "gulp-sourcemaps": "^1.9.1",
     "gulp-uglify": "^2.0.0",
     "opn": "^4.0.2",
-    "require-tasks": "^1.0.0",
+    "require.all": "^2.0.3",
     "rollup-plugin-babel": "^2.6.1",
     "rollup-plugin-commonjs": "^5.0.5",
     "rollup-plugin-inject": "^2.0.0",
-    "rollup-plugin-node-resolve": "^2.0.0",
-    "run-sequence": "^1.2.2"
+    "rollup-plugin-node-resolve": "^2.0.0"
   },
   "dependencies": {
     "jquery": "^3.1.1",

tasks/assets.js

@@ -1,19 +1,13 @@
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('assets:images', () => {
-        var dest = _.folder(paths.dist.assets.images);
-        return gulp.src(_.files(paths.app.assets.images))
-            .pipe($.newer(dest))
-            .pipe($.imagemin())
-            .pipe(gulp.dest(dest));
-    });
+    let dest = _.folder(paths.dist.assets.images);
+    gulp.src(_.files(paths.app.assets.images))
+        .pipe($.newer(dest))
+        .pipe($.imagemin())
+        .pipe(gulp.dest(dest));
 
-    gulp.task('assets:fonts', () => {
-        var dest = _.folder(paths.dist.assets.fonts);
-        return gulp.src(_.files(paths.app.assets.fonts))
-            .pipe($.newer(dest))
-            .pipe($.fontmin())
-            .pipe(gulp.dest(dest));
-    });
-
-    gulp.task('assets', ['assets:images', 'assets:fonts']);
+    let dest2 = _.folder(paths.dist.assets.fonts);
+    return gulp.src(_.files(paths.app.assets.fonts))
+        .pipe($.newer(dest2))
+        .pipe($.fontmin())
+        .pipe(gulp.dest(dest2));
 };

tasks/clean.js

@@ -1,10 +1,8 @@
 const del = require('del');
 
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('clean', () => {
-        return del([
-            _.files(paths.dist), 
-            _.folder(paths.dist.assets, _.NOT)
-        ]);
-    });
+    return del([
+        _.files(paths.dist), 
+        _.files(paths.dist.assets, _.NOT)
+    ]);
 };

tasks/copy.js

@@ -1,6 +1,4 @@
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('copy', () => {
-        return gulp.src(_.folder(paths.app) + '/index.html')
-            .pipe(gulp.dest(_.folder(paths.dist)));
-    });
+    return gulp.src(_.folder(paths.app) + '/index.html')
+        .pipe(gulp.dest(_.folder(paths.dist)));
 };

tasks/scripts-lint.js

@@ -1,10 +1,8 @@
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('scripts-lint', () => {
-        return gulp.src(_.files(paths.app.scripts))
-            .pipe($.eslint({
-                configFile: '.scripts-lint.yml'
-            }))
-            .pipe($.eslint.format())
-            .pipe($.eslint.failAfterError())
-    });
+    return gulp.src(_.files(paths.app.scripts))
+        .pipe($.eslint({
+            configFile: '.scripts-lint.yml'
+        }))
+        .pipe($.eslint.format())
+        .pipe($.eslint.failAfterError())
 };

tasks/scripts.js

@@ -7,30 +7,28 @@ const r = {
 };
 
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('scripts', () => {
-        return gulp.src(_.files(paths.app.scripts))
-            .pipe($.environment.if.development($.sourcemaps.init()))
-            .pipe($.rollup({
-                allowRealFiles: true,
-                context: 'window',
-                entry: _.files(paths.app.main),
-                format: 'cjs',
-                plugins: [
-                    r.nodeResolve(),
-                    r.commonjs(),
-                    r.babel({
-                        exclude: 'node_modules/**',
-                        presets: [['es2015', { modules: false }]]
-                    }),
-                    r.inject({
-                        include: _.files(paths.app.scripts),
-                        exclude: 'node_modules/**',
-                        $: 'jquery',
-                    })
-                ]
-            }))
-            .pipe($.environment.if.production($.uglify()))
-            .pipe($.environment.if.development($.sourcemaps.write()))
-            .pipe(gulp.dest(_.folder(paths.dist.js)));
-    });
+    return gulp.src(_.files(paths.app.scripts))
+        .pipe($.environment.if.development($.sourcemaps.init()))
+        .pipe($.rollup({
+            allowRealFiles: true,
+            context: 'window',
+            entry: _.files(paths.app.main),
+            format: 'cjs',
+            plugins: [
+                r.nodeResolve(),
+                r.commonjs(),
+                r.babel({
+                    exclude: 'node_modules/**',
+                    presets: [['es2015', { modules: false }]]
+                }),
+                r.inject({
+                    include: _.files(paths.app.scripts),
+                    exclude: 'node_modules/**',
+                    $: 'jquery',
+                })
+            ]
+        }))
+        .pipe($.environment.if.production($.uglify()))
+        .pipe($.environment.if.development($.sourcemaps.write()))
+        .pipe(gulp.dest(_.folder(paths.dist.js)));
 };

tasks/scss-lint.js

@@ -1,8 +1,6 @@
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('scss-lint', () => {
-        return gulp.src(_.files(paths.app.scss))
-            .pipe($.sassLint())
-            .pipe($.sassLint.format())
-            .pipe($.sassLint.failOnError())
-    });
+    return gulp.src(_.files(paths.app.scss))
+        .pipe($.sassLint())
+        .pipe($.sassLint.format())
+        .pipe($.sassLint.failOnError())
 };

tasks/scss.js

@@ -1,11 +1,9 @@
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('scss', () => {
-        return gulp.src(_.files(paths.app.scss))
-            .pipe($.environment.if.development($.sourcemaps.init()))
-            .pipe($.sass().on('error', $.sass.logError))
-            .pipe($.autoprefixer({ browsers: ['last 2 versions'] }))
-            .pipe($.environment.if.production($.cleanCss()))
-            .pipe($.environment.if.development($.sourcemaps.write()))
-            .pipe(gulp.dest(_.folder(paths.dist.css)));
-    });
+    return gulp.src(_.files(paths.app.scss))
+        .pipe($.environment.if.development($.sourcemaps.init()))
+        .pipe($.sass().on('error', $.sass.logError))
+        .pipe($.autoprefixer({ browsers: ['last 2 versions'] }))
+        .pipe($.environment.if.production($.cleanCss()))
+        .pipe($.environment.if.development($.sourcemaps.write()))
+        .pipe(gulp.dest(_.folder(paths.dist.css)));
 };

tasks/serve.js

@@ -1,12 +1,10 @@
 const opn = require('opn');
 
 module.exports = (gulp, paths, $, _) => {
-    gulp.task('serve', () => {
-        opn('http://localhost:' + paths.port);
+    opn('http://localhost:' + paths.port);
 
-        $.connect.server({
-            root: _.folder(paths.dist),
-            port: paths.port
-        });
+    $.connect.server({
+        root: _.folder(paths.dist),
+        port: paths.port
     });
 };

tasks/watch.js

@@ -1,8 +1,6 @@
-module.exports = (gulp, paths, $, _) => {
-    gulp.task('watch', () => {
-        gulp.watch(_.files(paths.app.scss), ['scss-lint', 'scss']);
-        gulp.watch(_.files(paths.app.scripts), ['scripts']);
-        gulp.watch(_.folder(paths.app) + '/index.html', ['copy']);
-        return gulp.watch(_.files(paths.app.assets.images), ['assets']);
-    });
+module.exports = (gulp, paths, $, _, tasks) => {
+    gulp.watch(_.files(paths.app.scss), gulp.series(tasks.scssLint, tasks.scss));
+    gulp.watch(_.files(paths.app.scripts), gulp.series(tasks.scriptsLint, tasks.scriptsLint));
+    gulp.watch(_.folder(paths.app) + '/index.html', tasks.copy);
+    gulp.watch(_.files(paths.app.assets.images), tasks.assets);
 };