diff --git a/generators/app/templates/_package.json b/generators/app/templates/_package.json index 9b04f66..9c7e189 100755 --- a/generators/app/templates/_package.json +++ b/generators/app/templates/_package.json @@ -1,9 +1,7 @@ { "name": "<%= appName %>", "version": "1.0.0", - "dependencies": { - - }, + "dependencies": {}, "devDependencies": { "gulp": "github:gulpjs/gulp#4.0", "gulp-changed": "~2.0", @@ -44,6 +42,6 @@ ], "scripts": { "dev": "gulp --require babel-register --gulpfile tasks", - "build": "gulp --require babel-register --gulpfile tasks build" + "build": "gulp --require babel-register --gulpfile tasks build --production" } } diff --git a/generators/app/templates/dev/html/index.html b/generators/app/templates/dev/html/index.html index c83777f..0611d8f 100644 --- a/generators/app/templates/dev/html/index.html +++ b/generators/app/templates/dev/html/index.html @@ -6,7 +6,7 @@ - + @@ -41,7 +41,7 @@
- - + + diff --git a/generators/app/templates/styleguide/tasks/styleguide.js b/generators/app/templates/styleguide/tasks/styleguide.js index da9dc7e..7b28a21 100644 --- a/generators/app/templates/styleguide/tasks/styleguide.js +++ b/generators/app/templates/styleguide/tasks/styleguide.js @@ -13,33 +13,41 @@ const sourcePath = path.join(config.root.dev, config.styleguide.dev); const distPath = path.join(config.root.dist, config.styleguide.dist); const styleguideConfig = { - 'layout': 'default', - 'layouts': sourcePath + '/views/layouts/*', - 'layoutIncludes': sourcePath + '/views/layouts/includes/*', - 'views': [ - sourcePath + '/views/**/*', - '!' + sourcePath + '/views/+(layouts)/**' - ], - 'materials': sourcePath + '/materials/**/*.html', - 'data': sourcePath + '/data/**/*.{json,yml}', - 'docs': sourcePath + '/docs/**/*.md', - 'keys': { - 'materials': 'materials', - 'views': 'views', - 'docs': 'docs' - }, - 'helpers': {}, - 'logErrors': false, - 'dest': distPath + 'layout': 'default', + 'layouts': sourcePath + '/views/layouts/*', + 'layoutIncludes': sourcePath + '/views/layouts/includes/*', + 'views': [ + sourcePath + '/views/**/*', + '!' + sourcePath + '/views/+(layouts)/**' + ], + 'materials': sourcePath + '/materials/**/*.html', + 'data': sourcePath + '/data/**/*.{json,yml}', + 'docs': sourcePath + '/docs/**/*.md', + 'keys': { + 'materials': 'materials', + 'views': 'views', + 'docs': 'docs' + }, + 'helpers': {}, + 'logErrors': false, + 'dest': distPath }; -const styleguide = () => { +export const styleguide = () => { - return new Promise((resolve) => { - assemble(styleguideConfig); - resolve(); - }); + return new Promise((resolve) => { + assemble(styleguideConfig); + resolve(); + }); +}; + + +export const watch = () => { + gulp.watch(styleguideConfig.layouts, gulp.series(styleguide)); + gulp.watch(styleguideConfig.layoutIncludes, gulp.series(styleguide)); + gulp.watch(styleguideConfig.views, gulp.series(styleguide)); + gulp.watch(styleguideConfig.materials, gulp.series(styleguide)); }; diff --git a/generators/app/templates/tasks/clean.js b/generators/app/templates/tasks/clean.js index dd18f29..66e40c4 100755 --- a/generators/app/templates/tasks/clean.js +++ b/generators/app/templates/tasks/clean.js @@ -8,11 +8,11 @@ import del from 'del'; import config from './config/general'; -const clean = () => { +export const clean = () => { - return del(config.root.dist, { - force: true - }); + return del(config.root.dist, { + force: true + }); }; diff --git a/generators/app/templates/tasks/config/general.json b/generators/app/templates/tasks/config/general.json index 698f549..3dbda2d 100644 --- a/generators/app/templates/tasks/config/general.json +++ b/generators/app/templates/tasks/config/general.json @@ -1,31 +1,31 @@ { - "root": { - "dev": "<%= devFolderPath %>", - "dist": "<%= distFolderPath %>" - }, - "javascript": { - "dev": "js", - "dist": "assets/js", - "extensions": [".json", ".js"] - }, - "styles": { - "dev": "scss/**/*", - "dist": "assets/css", - "extensions": ".scss" - }, - "images": { - "dev": "img/**/*", - "dist": "assets/img", - "extensions": ".(jpg|png|svg|gif)" - }, - "html": { - "dev": "html/**/*", - "dist": "./", - "extensions": ".html" - }<% if (hasStyleguide) { %>, - "styleguide": { - "dev": "styleguide", - "dist": "assets/styleguide", - "extensions": ".(html,json,md,yml)" - }<% } %> + "root": { + "dev": "<%= devFolderPath %>", + "dist": "<%= distFolderPath %>" + }, + "javascript": { + "dev": "js", + "dist": "assets/js", + "extensions": [".json", ".js"] + }, + "styles": { + "dev": "scss/**/*", + "dist": "assets/css", + "extensions": ".scss" + }, + "images": { + "dev": "img/**/*", + "dist": "assets/img", + "extensions": ".(jpg|png|svg|gif)" + }, + "html": { + "dev": "html/**/*", + "dist": "./", + "extensions": ".html" + }<% if (hasStyleguide) { %>, + "styleguide": { + "dev": "styleguide", + "dist": "assets/styleguide", + "extensions": ".(html,json,md,yml)" + }<% } %> } diff --git a/generators/app/templates/tasks/config/webpack.js b/generators/app/templates/tasks/config/webpack.js index 1ab98a7..c3cbaa7 100644 --- a/generators/app/templates/tasks/config/webpack.js +++ b/generators/app/templates/tasks/config/webpack.js @@ -20,55 +20,55 @@ const plugins = []; plugins.push(new webpack.NoEmitOnErrorsPlugin()); plugins.push(new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - filename: 'vendors.min.js' + name: 'vendor', + filename: 'vendors.min.js' })); if (isProduction()) { - plugins.push( - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - } - }), - new webpack.NoEmitOnErrorsPlugin() - ); + plugins.push( + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + } + }), + new webpack.NoEmitOnErrorsPlugin() + ); } else { - plugins.push(new webpack.HotModuleReplacementPlugin()); + plugins.push(new webpack.HotModuleReplacementPlugin()); } const webpackConfig = { - cache: true, - context: sourcePath, - entry: { - app: './app.js', - }, - module: { - rules: [ - { - test: /\.js$/, - exclude: path.resolve(__dirname, 'node_modules/'), - loader: 'babel-loader', - options: { - presets: [['es2015', { - modules: false - }]] - } - } - ] - }, - output: { - path: distPath, - filename: 'app.min.js', - publicPath: config.javascript.dist - }, - resolve: { - modules: [sourcePath, 'node_modules'], - extensions: config.javascript.extensions - }, - plugins: plugins + cache: true, + context: sourcePath, + entry: { + app: './app.js', + }, + module: { + rules: [ + { + test: /\.js$/, + exclude: path.resolve(__dirname, 'node_modules/'), + loader: 'babel-loader', + options: { + presets: [['es2015', { + modules: false + }]] + } + } + ] + }, + output: { + path: distPath, + filename: 'app.min.js', + publicPath: config.javascript.dist + }, + resolve: { + modules: [sourcePath, 'node_modules'], + extensions: config.javascript.extensions + }, + plugins: plugins }; diff --git a/generators/app/templates/tasks/helpers/build.js b/generators/app/templates/tasks/helpers/build.js index 8ebf16b..0cdebeb 100644 --- a/generators/app/templates/tasks/helpers/build.js +++ b/generators/app/templates/tasks/helpers/build.js @@ -6,7 +6,7 @@ import gutil from 'gulp-util'; const isProduction = () => { - return gutil.env.production; + return gutil.env.production; }; diff --git a/generators/app/templates/tasks/helpers/logger.js b/generators/app/templates/tasks/helpers/logger.js index 642a74c..dc007f7 100755 --- a/generators/app/templates/tasks/helpers/logger.js +++ b/generators/app/templates/tasks/helpers/logger.js @@ -6,14 +6,14 @@ import gutil from 'gulp-util'; const errorLogger = (taskName, message) => { - throw new gutil.PluginError({ - plugin: taskName, - message: gutil.colors.red(message) - }); + throw new gutil.PluginError({ + plugin: taskName, + message: gutil.colors.red(message) + }); }; const infoLogger = (taskName, message) => { - gutil.log(taskName, gutil.colors.magenta(message)); + gutil.log(taskName, gutil.colors.magenta(message)); }; diff --git a/generators/app/templates/tasks/html.js b/generators/app/templates/tasks/html.js index 89418fc..aae77f1 100755 --- a/generators/app/templates/tasks/html.js +++ b/generators/app/templates/tasks/html.js @@ -12,11 +12,16 @@ const sourceFiles = path.join(config.root.dev, config.html.dev) + config.html.ex const distPath = path.join(config.root.dist, config.html.dist); -const html = () => { - return gulp.src(sourceFiles) +export const html = () => { + return gulp.src(sourceFiles) - // Set desitination - .pipe(gulp.dest(distPath)); + // Set desitination + .pipe(gulp.dest(distPath)); +}; + + +export const watch = () => { + gulp.watch(sourceFiles, gulp.series(html)); }; diff --git a/generators/app/templates/tasks/images.js b/generators/app/templates/tasks/images.js index 5793ed5..ec67ca5 100755 --- a/generators/app/templates/tasks/images.js +++ b/generators/app/templates/tasks/images.js @@ -17,33 +17,38 @@ const sourceFiles = path.join(config.root.dev, config.images.dev) + config.image const distPath = path.join(config.root.dist, config.images.dist); -const images = () => { - return gulp.src(sourceFiles) - // Stop Plumber - .pipe(plumber()) - - // Only optimize changed images - .pipe(changed(distPath)) - - // Imagemin - .pipe(imagemin({ - optimizationLevel: 3, - progressive: true, - svgoPlugins: [{ - removeViewBox: false - }] - })) - - // Stop Plumber - .pipe(plumber.stop()) - - // Set desitination - .pipe(gulp.dest(distPath)) - - // Show total size of images - .pipe(size({ - title: 'images' - })); +export const images = () => { + return gulp.src(sourceFiles) + // Stop Plumber + .pipe(plumber()) + + // Only optimize changed images + .pipe(changed(distPath)) + + // Imagemin + .pipe(imagemin({ + optimizationLevel: 3, + progressive: true, + svgoPlugins: [{ + removeViewBox: false + }] + })) + + // Stop Plumber + .pipe(plumber.stop()) + + // Set desitination + .pipe(gulp.dest(distPath)) + + // Show total size of images + .pipe(size({ + title: 'images' + })); +}; + + +export const watch = () => { + gulp.watch(sourceFiles, gulp.series(images)); }; diff --git a/generators/app/templates/tasks/javascript.js b/generators/app/templates/tasks/javascript.js index a396fa9..cb98f07 100755 --- a/generators/app/templates/tasks/javascript.js +++ b/generators/app/templates/tasks/javascript.js @@ -10,24 +10,24 @@ import webpackConfig from './config/webpack'; import {errorLogger, infoLogger} from './helpers/logger'; -const javascript = (callback) => { - webpack(webpackConfig, (err, stats) => { - if (err) { - errorLogger('Webpack', err); - } - - infoLogger('Webpack', stats.toString({ - assets: true, - chunks: false, - chunkModules: false, - colors: true, - hash: false, - timings: true, - version: false - })); - - callback(); - }); +export const javascript = (callback) => { + webpack(webpackConfig, (err, stats) => { + if (err) { + errorLogger('Webpack', err); + } + + infoLogger('Webpack', stats.toString({ + assets: true, + chunks: false, + chunkModules: false, + colors: true, + hash: false, + timings: true, + version: false + })); + + callback(); + }); }; diff --git a/generators/app/templates/tasks/server.js b/generators/app/templates/tasks/server.js index e1538a6..7e410b4 100755 --- a/generators/app/templates/tasks/server.js +++ b/generators/app/templates/tasks/server.js @@ -17,30 +17,34 @@ import webpackConfig from './config/webpack'; const compiler = webpack(webpackConfig); const serverConfig = { - port: 8080, - ui: { - port: 8081 - }, - server: { - baseDir: config.root.dist, - }, - tunnel: false + port: 8080, + ui: { + port: 8081 + }, + server: { + baseDir: config.root.dist, + }, + tunnel: false }; if (!isProduction()) { - serverConfig.middleware = [ - webpackDevMiddleware(compiler, { - noInfo: true, - publicPath: path.join('/', webpackConfig.output.publicPath), - stats: 'errors-only' - }), - webpackHotMiddleware(compiler) - ]; + serverConfig.middleware = [ + webpackDevMiddleware(compiler, { + noInfo: true, + publicPath: path.join('/', webpackConfig.output.publicPath), + stats: 'errors-only' + }), + webpackHotMiddleware(compiler) + ]; } -const server = () => { - browserSync.init(serverConfig); +export const server = () => { + + return new Promise((resolve) => { + browserSync.init(serverConfig); + resolve(); + }); }; diff --git a/generators/app/templates/tasks/styles.js b/generators/app/templates/tasks/styles.js index 4c63c41..1816187 100755 --- a/generators/app/templates/tasks/styles.js +++ b/generators/app/templates/tasks/styles.js @@ -25,38 +25,43 @@ const sourceFiles = path.join(config.root.dev, config.styles.dev) + config.style const distPath = path.join(config.root.dist, config.styles.dist); -const styles = (done) => { +export const styles = (done) => { - return gulp.src(sourceFiles) - // Start Plumber - .pipe(plumber()) + return gulp.src(sourceFiles) + // Start Plumber + .pipe(plumber()) - // Sass - .pipe(sass()) + // Sass + .pipe(sass()) - // Post CSS (prefix, combine all mediaqueries and minify) - .pipe(postcss(postCssProcessors)) + // Post CSS (prefix, combine all mediaqueries and minify) + .pipe(postcss(postCssProcessors)) - // Rename the file to respect naming covention. - .pipe(rename((path) => { - path.basename += '.min'; - })) + // Rename the file to respect naming covention. + .pipe(rename((path) => { + path.basename += '.min'; + })) - // Stop Plumber - .pipe(plumber.stop()) + // Stop Plumber + .pipe(plumber.stop()) - // Write to output - .pipe(gulp.dest(distPath)) + // Write to output + .pipe(gulp.dest(distPath)) - // Show total size of css - .pipe(size({ - title: 'css' - })) + // Show total size of css + .pipe(size({ + title: 'css' + })) - // Reload - .pipe(browserSync.reload({ - stream: true - })); + // Reload + .pipe(browserSync.reload({ + stream: true + })); +}; + + +export const watch = () => { + gulp.watch(sourceFiles, gulp.series(styles)); }; diff --git a/generators/app/templates/tasks/watch.js b/generators/app/templates/tasks/watch.js index ded5a44..413ee13 100755 --- a/generators/app/templates/tasks/watch.js +++ b/generators/app/templates/tasks/watch.js @@ -7,15 +7,16 @@ import path from 'path'; import config from './config/general'; +import {watch as styles} from './styles'; +import {watch as images} from './images'; +import {watch as html} from './html';<% if (hasStyleguide) { %> +import {watch as styleguide} from './styleguide';<% } %> -const watch = () => { - const tasks = ['css', 'img']; - let sourceFiles = []; - - for (task of tasks) { - const watchFiles = path.join(config.root.dev, config[task].dev) + config[task].extensions; - gulp.watch(watchFiles, task); - } +export const watch = () => { + styles(); + images(); + html();<% if (hasStyleguide) { %> + styleguide();<% } %> }; diff --git a/package.json b/package.json index d50e63d..b3eca48 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "generator-webrocket", - "version": "0.0.1", + "version": "0.0.2", "description": "Webrocket by @AnataCreative", "license": "MIT", "repository": "AnataCreative/webrocket",