Develop

generators/app/index.js

@@ -1,58 +1,104 @@
 'use strict';
-var yeoman = require('yeoman-generator');
+
+var Generator = require('yeoman-generator');
 var chalk = require('chalk');
 var yosay = require('yosay');
-var string = require('underscore.string');
-
-module.exports = yeoman.Base.extend({
-  prompting: function () {
-    this.log(['\n',
-      chalk.yellow(' ##     ##    #####    ##    ##   ##   ##  #######  #######         #####      #####   ##    ##'),
-      chalk.yellow('###    ###   #######   ###   ##   ##  ##   #######  #######         ######    #######  ##    ##'),
-      chalk.yellow('####   ###  ##     ##  ###   ##   ## ##    ##       ##              ##  ##   ##     ## ##    ##'),
-      chalk.yellow('####  ####  ##     ##  ####  ##   ####     ##       ##              ##  ##   ##     ##  ##  ##'),
-      chalk.yellow('## #### ##  ##     ##  ## ## ##   ####     ######   ######   ####   ######   ##     ##   ####'),
-      chalk.yellow('##  ##  ##  ##     ##  ## ## ##   #####    ######   ######   ####   ######   ##     ##    ##'),
-      chalk.yellow('##  ##  ##  ##     ##  ##  ####   ## ###   ##       ##              ##   ##  ##     ##    ##'),
-      chalk.yellow('##      ##  ##     ##  ##   ###   ##  ##   ##       ##              ##   ##  ##     ##    ##'),
-      chalk.yellow('##      ##   #######   ##   ###   ##   ##  #######  #######         #######   #######     ##'),
-      chalk.yellow('##      ##    #####    ##    ##   ##   ### #######  #######         ######     #####      ##')].join('\n')
-    );
+var remote = require('yeoman-remote');
+var s = require("underscore.string");
+var mkdirp = require('mkdirp');
+
+module.exports = class extends Generator {
+  constructor(args, opts) {
+    // Calling the super constructor is important so our generator is correctly set up
+    super(args, opts);
+
+    // Next, add your custom code
+    this.option('babel'); // This method adds support for a `--babel` flag
+  }
+    async prompting() {
+      const self = this;
+
+      self.log(['\n',
+        chalk.yellow(' ##     ##    #####    ##    ##   ##   ##  #######  #######         #####      #####   ##    ##'),
+        chalk.yellow('###    ###   #######   ###   ##   ##  ##   #######  #######         ######    #######  ##    ##'),
+        chalk.yellow('####   ###  ##     ##  ###   ##   ## ##    ##       ##              ##  ##   ##     ## ##    ##'),
+        chalk.yellow('####  ####  ##     ##  ####  ##   ####     ##       ##              ##  ##   ##     ##  ##  ##'),
+        chalk.yellow('## #### ##  ##     ##  ## ## ##   ####     ######   ######   ####   ######   ##     ##   ####'),
+        chalk.yellow('##  ##  ##  ##     ##  ## ## ##   #####    ######   ######   ####   ######   ##     ##    ##'),
+        chalk.yellow('##  ##  ##  ##     ##  ##  ####   ## ###   ##       ##              ##   ##  ##     ##    ##'),
+        chalk.yellow('##      ##  ##     ##  ##   ###   ##  ##   ##       ##              ##   ##  ##     ##    ##'),
+        chalk.yellow('##      ##   #######   ##   ###   ##   ##  #######  #######         #######   #######     ##'),
+        chalk.yellow('##      ##    #####    ##    ##   ##   ### #######  #######         ######     #####      ##')].join('\n')
+      );
 
     // Have Yeoman greet the user.
-    this.log(yosay(
+    self.log(yosay(
       'Welcome to the ' + chalk.green('MBoy Gulp') + ' v1.0 generator!'
     ));
 
-    this.log('I am going to generate the default Monkee-Boy gulp setup. Reference https://github.com/Monkee-Boy/gulpfile for more details.\n\nFirst a couple of quick questions.\n');
+    self.log('I am going to generate the default Monkee-Boy gulp setup. Reference https://github.com/Monkee-Boy/gulpfile for more details.\n\nFirst a couple of quick questions.\n');
 
-    this.remote('Monkee-Boy', 'gulpfile', function (err, remote) {
-      remote.directory('.', '.');
-    });
+    // remote('Monkee-Boy', 'gulpfile', function (err, remote) {
+    //   remote.directory('.', '.');
+    // });
 
-    var prompts = [
-      {
-        name: 'projectName',
-        message: 'What would you like to call this project (typically client name)?',
-        default: 'Project Name'
-      }, {
-        name: 'repoUrl',
-        message: 'What is the git repo url for this project?',
-        default: '[email protected]:monkeeboy/PROJECTREPONAME.git'
-      }
-    ];
+    // var prompts = [
+    //   {
+    //     name: 'projectName',
+    //     message: 'What would you like to call this project (typically client name)?',
+    //     default: 'Project Name'
+    //   }, {
+    //     name: 'repoUrl',
+    //     message: 'What is the git repo url for this project?',
+    //     default: '[email protected]:monkeeboy/PROJECTREPONAME.git'
+    //   }
+    // ];
 
-    return this.prompt(prompts).then(function (props) {
-      this.props = props;
-      this.props.projectName = string.slugify(props.projectName);
-    }.bind(this));
-  },
+    self.answers = await self.prompt([{
+      type: 'input',
+      name: 'projectName',
+      message: 'What would you like to call this project (typically client name)?',
+    }, {
+      type: 'input',
+      name: 'repoUrl',
+      message: 'What is the git repo url for this project?',
+      default: '[email protected]:monkeeboy/PROJECTREPONAME.git'
+    }]);
 
-  writing: function () {
-    // this.template('package.json', 'package.json');
-  },
+  }
+
+  writing() {
+    const self = this;
+
+    // Copy and fill in package.json
+    self.fs.copyTpl(self.templatePath('package.json'), self.destinationPath('package.json'),
+      { 
+        projectName: self.answers.projectName, 
+        repoUrl: self.answers.repoUrl
+      }
+    );
 
-  install: function () {
+    // Copy gulpfile and gulp-related files and folders
+    self.fs.copy(self.templatePath('gulpfile.js'), self.destinationPath('gulpfile.js'));
+    self.fs.copy(self.templatePath('gulp'), self.destinationPath('gulp'));
+    self.fs.copy(self.templatePath('css'), self.destinationPath('css'));
+    self.fs.copy(self.templatePath('js'), self.destinationPath('js'));
+
+    // Have to make images because they're initially empty
+    mkdirp.sync(this.destinationPath('images/src'));
+    mkdirp.sync(this.destinationPath('images/dist'));
+
+    self.fs.copy(self.templatePath('.jshintrc'), self.destinationPath('.jshintrc'));
+
+  }
+
+  install() {
+    this.installDependencies({
+      yarn: true,
+      bower: false,
+      npm: false,
+    });
     this.log('\nYour gulp files and structure are ready.\n' + chalk.green('May the code be with you.'));
   }
-});
+
+}

generators/app/templates/.jshintrc

@@ -0,0 +1,8 @@
+{
+	"curly": true,
+	"sub": true,
+	"undef": true,
+	"eqeqeq": true,
+	"strict": true,
+	"esversion": 6
+}

generators/app/templates/css/src/_components.css

@@ -0,0 +1,5 @@
+/* Components */
+
+@import "_components/_header.css";
+@import "_components/_content.css";
+@import "_components/_footer.css";

generators/app/templates/css/src/_components/_content.css

@@ -0,0 +1 @@
+/* Content */

generators/app/templates/css/src/_components/_footer.css

@@ -0,0 +1 @@
+/* Footer */

generators/app/templates/css/src/_components/_header.css

@@ -0,0 +1 @@
+/* Header */

generators/app/templates/css/src/_layout.css

@@ -0,0 +1 @@
+/* Layout */

generators/app/templates/css/src/_typography.css

@@ -0,0 +1 @@
+/* Typography */

generators/app/templates/css/src/maps/bp.yml

@@ -0,0 +1,9 @@
+large-desktop: 1320px
+desktop: 1220px
+small-desktop: 1100px
+tablet: 1024px
+mobile: 768px
+mobile-forms: 640px
+small: 600px
+tiny: 430px
+very-small: 360px