angular-1.5-cli
Version:
A cli for Angular 1.5.
1,673 lines (1,379 loc) • 51.4 kB
JavaScript
#!/usr/bin/env node
var mkdirp = require('mkdirp');
var touch = require('touch');
var fs = require('fs-extra')
var process = require('process');
var colors = require('colors');
var prompt = require('prompt');
var scriptName = 'app';
var request = require('request');
var packagejson = require('./package.json');
var cmd = require('node-cmd');
var value = process.argv[2];
var argument3 = process.argv[3];
var argument4 = process.argv[4];
//
//on init run genScript
initScript();
//
//
function initScript() {
genScript()
if (value === 'new') {
setTimeout(function () {
console.log('installing npm modules...');
}, 1500);
installModules();
}
}
function installModules() {
cmd.get(
`
cd ${argument3}
npm i
`,
function (data) {
console.log('installation of npm modules complete!');
}
);
}
//declaring script as function in order to re-execute the script
function genScript() {
//spilt 'gen new' from 'gen {{COMPONENT NAME}}'
if (value === 'new') {
// generate a brand new project with the name
//argument 3 is now the project name
mkdirp(argument3, function (err) {
if (err) console.error(err)
else
process.chdir(argument3),
//generte dockerfile
fs.writeFile("Dockerfile", `FROM node:6.5
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm set progress=false
RUN npm install
EXPOSE 8080
CMD ["npm", "run", "startContainer"]`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "Dockerfile".white);
});
//generte deploy.js
fs.writeFile("deploy.js", `var request = require('request');
var headers = {
'Content-Type': 'application/json'
};
var dataString = ''{"docker_tag": '$''{process.env.CIRCLE_BRANCH}"}'';
var options = {
url: '', // add your docker url aka 'https://registry.hub.docker.com/u/{{the rest of your url}}'
method: 'POST',
headers: headers,
body: dataString
};
function callback(error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body);
}
}
request(options, callback);`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "deploy.js".white);
});
//generte circle.yml
fs.writeFile("circle.yml", `machine:
node:
version: 6.5
dependencies:
cache_directories:
- node_modules
override:
- npm prune && npm install
test:
override:
- echo 'test needed'
deployment:
staging:
branch: [develop, master]
commands:
- npm run deploy`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "circle.yml".white);
});
//generte .gitignore
fs.writeFile(".gitignore", `.DS_Store
.tmp
.git
node_modules
.settings
*.log
client/bundle.js
client/bundle.js.map
.idea`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + ".gitignore".white);
});
//generte webpack.config.js
fs.writeFile("webpack.config.js", `var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'client'),
wwwPath = path.join(__dirname, 'dist'),
pkg = require('./package.json'),
HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV !== 'production';
if (isDev) {
module.exports = {
entry: path.join(libPath, '/app/app.module.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\\.html$/, loader: 'raw'
}, {
test: /\\.(png|jpg)$/,
loader: 'file?name=img/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
},{
test: /\\.scss$/,loader: 'style!css!sass'
}, {
test: /\\.css$/, loader: 'style!css'
}, {
test: /\\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\\.svg/, /fontawesome-webfont\\.eot/, /fontawesome-webfont\\.ttf/, /fontawesome-webfont\\.woff/, /fontawesome-webfont\\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
},
{ test: /\\.(ttf|otf|eot|svg|woff(2)?)$/, loader: 'url' }]
},
plugins: [
new webpack.ProvidePlugin({
'window.Masonry': 'Masonry'
}),
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.ejs'),
inject: true
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
}else{
module.exports = {
entry: path.join(libPath, '/app/app.module.js'),
context: path.resolve(__dirname, './client'),
output: {
filename: 'bundle.[hash].js',
hashDigestLength: 7,
path: path.join(wwwPath),
publicPath: '/'
},
module: {
loaders: [{
test: /\\.html$/, loader: 'raw'
}, {
test: /\\.(png|jpg)$/,
loader: 'file?name=img/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
},{
test: /\\.scss$/,loader: 'style!css!sass'
}, {
test: /\\.css$/, loader: 'style!css'
}, {
test: /\\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\\.svg/, /fontawesome-webfont\\.eot/, /fontawesome-webfont\\.ttf/, /fontawesome-webfont\\.woff/, /fontawesome-webfont\\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
},
{ test: /\\.(ttf|otf|eot|svg|woff(2)?)$/, loader: 'url' }]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.ProvidePlugin({
'window.Masonry': 'Masonry'
}),
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\\.js$|\\.css$|\\.html$/,
threshold: 10240,
minRatio: 0.8
}),
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.ejs'),
inject: true
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
}
`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "karma.conf.js".white);
});
//generate package.json
fs.writeFile("package.json", `{
"name": "${argument3}",
"version": "0.0.1",
"description": "Boilerplate generated by Angular-1.5-cli.",
"main": "index.js",
"dependencies": {
"angular": "1.5.7",
"angular-animate": "1.5.7",
"angular-mocks": "1.5.7",
"angular-ui-router": "0.3.1",
"bootstrap-css-only": "3.3.6",
"lodash": "4.13.1",
"normalize.css": "4.1.1",
"http-server": "^0.9.0",
"angular-1.5-cli":"^1.6.0"
},
"devDependencies": {
"angular-mocks": "1.5.7",
"babel-core": "6.10.4",
"http-server": "0.9.0",
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.9.0",
"browser-sync": "2.13.0",
"browser-sync-webpack-plugin": "1.1.4",
"css-loader": "0.23.1",
"file-loader": "0.9.0",
"fs-walk": "0.0.1",
"gulp": "3.9.1",
"gulp-rename": "1.2.2",
"gulp-template": "4.0.0",
"html-webpack-plugin": "2.28.0",
"jasmine": "2.4.1",
"jasmine-core": "2.4.1",
"karma": "1.1.0",
"karma-jasmine": "1.0.2",
"karma-phantomjs-launcher": "1.0.1",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "1.7.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"ng-annotate-loader": "0.1.0",
"node-libs-browser": "1.0.0",
"node-sass": "4.4.0",
"phantomjs-prebuilt": "2.1.7",
"raw-loader": "0.5.1",
"run-sequence": "1.2.1",
"sass-loader": "4.1.1",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.1",
"webpack-dev-server": "1.16.3",
"webpack-stream": "3.2.0",
"yargs": "4.7.1"
},
"scripts": {
"start": "webpack && webpack-dev-server --content-base client/ --hot --inline",
"serve": "webpack && webpack-dev-server --content-base client/ --hot --inline",
"create Component": "gen comp",
"build": "webpack -p --config ./webpack.config.js --progress",
"startContainer": "npm run build && http-server ./build",
"deploy": "node deploy.js"
},
"keywords": [
"angular",
"webpack",
"es6"
],
"repository": {
"type": "git",
"url": "https://github.com/SwiftySpartan/Angular-1.5-cli"
},
"author": "Andrew Wormald",
"license": "MIT"
}`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "package.json".white);
});
//generate .bablerc
fs.writeFile(".babelrc", `{
"presets": [ "es2015"]
}`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + ".bablerc".white);
});
// generate client directory
mkdirp("client", function (err) {
//within this directory create all the sub scripts (e.g. app.component.html)
process.chdir("client"),
mkdirp("assets/img", function (err) {
console.log(" 🎁 created: ".cyan + "client/assets".white);
console.log(" 🎁 created: ".cyan + "client/assets/img".white);
});
//generate favicon.jpg using base 64
data = 'data:image/png;base64,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';
function decodeBase64Image(dataString) {
var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
response = {};
if (matches.length !== 3) {
return new Error('Invalid input string');
}
response.type = matches[1];
response.data = new Buffer(matches[2], 'base64');
return response;
}
imageBuffer = decodeBase64Image(data);
fs.writeFile('favicon.ico', imageBuffer.data, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "favicon.png".white);
});
//generate index.ejs file
fs.writeFile(`index.ejs`, `<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title><%- htmlWebpackPlugin.options.pkg.title %></title>
</head>
<body ng-app="app" ng-strict-di ng-cloak>
<app>
Loading...
</app>
</body>
<!-- {%= o.htmlWebpackPlugin.options.pkg.name + ' v' + o.htmlWebpackPlugin.options.pkg.version + ' built on ' + new Date() %} -->
</html>`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "index.ejs".white);
});
// generate index.html
fs.writeFile("index.html", `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome | Angular-1.5-cli</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="A cli for Angular 1.5">
<link rel="icon" href="favicon.jpg">
<base href="/">
</head>
<body ng-app="app" ng-strict-di ng-cloak>
<app>
Loading...
</app>
<script src="bundle.js"></script>
</body>
</html>`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "index.html".white);
});
mkdirp("app/components", function (err) {
if (err) console.error(err)
else
process.chdir("app"),
//build components.js
fs.writeFile("components/components.js", `
import angular from 'angular';
const ComponentsModule = angular.module('app.components', [
]);
export default ComponentsModule;
`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "app/components/components.js".white);
});
//build component.html
fs.writeFile(`${scriptName}.component.html`, `<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<div class="container">
<img src="https://raw.githubusercontent.com/SwiftySpartan/Angular-1.5-cli/master/canvas1.png" class=".img-responsive center-block">
<p>Angular-1.5-cli</p>
</div>
<div class="container-fluid main">
<div class="col-md-1 littleGuy">
<h1>Welcome</h1>
<p>
Welcome to Angular-1.5-cli! We hope you enjoy the CLI that will aid you in effecient web app development.
</p>
</div>
<div class="col-md-1 littleGuy">
<h1>Commands</h1>
<p>Generate Project:
gen new {{PROJECT NAME}}<br>
Generates a new project using scss styling <br><br>
gen new {{PROJECT NAME}} --style:css <br>
Generates a new project using css styling <br><br>
gen -c {{COMPONENT NAME}} <br>
Generates a new component using scss styling <br><br>
gen -c {{COMPONENT NAME}} --style:css <br>
Generates a new component using css styling <br><br>
</p>
</div>
<div class="col-md-1 littleGuy">
<h1>Help</h1>
<p>
gen h <br>
gen -h <br>
gen help <br>
gen --help <br>
</p>
</div>
<div class="col-md-1 littleGuy">
<h1>Issues</h1>
<p>
Please report any issues on github: <br>
https://github.com/SwiftySpartan/Angular-1.5-cli/issues
</p>
</div>
</div>
`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "client/".white + scriptName.white + ".component.html".white);
});
//build scss || css styling scripts
if (argument3 === "--style:css" || argument4 === "--style:css") {
// build component.css
fs.writeFile(scriptName + ".component.css", `
body {
background-color: #212121;
color: white;
font-size: 38px;
}
.container {
display: block;
width: 100%;
}
.container p {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
}
.main{
background-color: #C3002F;
}
.main .littleGuy{
background-color: #DD0031;
width: 300px;
height: 350px;
position: relative;
margin-left: 30px;
margin-top: 30px;
margin-bottom: 30px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
.main .littleGuy h1 {
font-size: 20px;
font-family: 'Open Sans Condensed', sans-serif;
}
.main .littleGuy p {
font-size: 17px;
font-family: 'Open Sans Condensed', sans-serif;
}
`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "client/".white + scriptName.white + ".component.css".white);
});
} else {
// build component.scss
fs.writeFile(scriptName + ".component.scss", `@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:700');
body {
background-color: #212121;
color: white;
font-size: 38px;
}
.container {
display: block;
width: 100%;
p {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
}
}
.main{
background-color: #C3002F;
.littleGuy{
background-color: #DD0031;
width: 300px;
height: 350px;
position: relative;
margin-left: 30px;
margin-top: 30px;
margin-bottom: 30px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: block;
text-overflow: ellipsis;
h1 {
font-size: 20px;
font-family: 'Open Sans Condensed', sans-serif;
}
p {
font-size: 17px;
font-family: 'Open Sans Condensed', sans-serif;
}
}
}
`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "client/".white + scriptName.white + ".component.scss".white);
});
}
//build component.js
if (argument3 === "--style:css" || argument4 === "--style:css") {
// build component.js with import of css folder
fs.writeFile(scriptName + ".component.js", `import template from './app.component.html';
import './app.component.scss';
const AppComponent = {
template
};
export default AppComponent;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "client/".white + scriptName.white + ".component.js".white);
});
} else {
// build component.js with import of scss folder
fs.writeFile(scriptName + ".component.js", `import template from './app.component.html';
import './app.component.scss';
const AppComponent = {
template
};
export default AppComponent;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "client/".white + scriptName.white + ".component.js".white);
});
}
//build module.js
fs.writeFile(scriptName + ".module.js", `import 'bootstrap-css-only';
import 'normalize.css';
import angular from 'angular';
import appComponent from './app.component';
import ComponentsModule from './components/components';
angular.module('app', [
ComponentsModule.name
]).component('app', appComponent);`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + "client/".white + scriptName.white + ".module.js".white);
});
});
});
//making client directory and sub scripts should be last in the list as then you do not need to go back up a level in the directory ladder
});
//argument 4 is now the styling order
} else if (value === '-c') {
//go to components directory
const rootBase = __dirname
process.chdir(`./client/app/components`);
// GEN COMPONENT SCRIPT
componentsArray = [];
genArr = [];
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
}
value = camelize(`${value}`)
argument3 = camelize(`${argument3}`)
argument4 = camelize(`${argument4}`)
// sync app.component with updates
fs.readdir(process.cwd(), function (err, items) {
genArr = items;
generateDirectArray(genArr);
});
function generateDirectArray(items) {
for (var i = 0; i < items.length; i++) {
if (isDirectory(items[i])) {
} else {
componentsArray.push(items[i]);
}
}
importStringGenerator();
}
function isDirectory(inputString) {
var str = inputString;
var patt = new RegExp("[.]");
var res = patt.test(str);
return res;
}
String.prototype.capitalizeFirstLetter = function () {
return this.charAt(0).toUpperCase() + this.slice(1);
}
function importStringGenerator() {
componentsArray.push(`${argument3}`);
genString = "";
for (var i = 0; i < componentsArray.length; i++) {
genString = genString + ` import ${componentsArray[i].capitalizeFirstLetter()}Module from './${componentsArray[i]}/${componentsArray[i]}.module';\r`
}
listString = "";
for (var i = 0; i < componentsArray.length; i++) {
// check if last in list in order to not include comma
if (i === (componentsArray.length - 1)) {
listString = listString + ` ${componentsArray[i].capitalizeFirstLetter()}Module` + `.name \r`
} else {
listString = listString + ` ${componentsArray[i].capitalizeFirstLetter()}Module` + '.name, \r'
}
}
fs.writeFile("components.js", `import angular from 'angular';
${genString}
const ComponentsModule = angular.module('app.components',[
${listString}
]);
export default ComponentsModule;`, function (err) {
if (err) {
return console.log(` ❌ failed to update due to error: ${err}`);
}
console.log(" 🔰 updated: ".cyan + "components.js".white);
});
}
mkdirp(argument3, function (err) {
console.log("Generating Component...".white)
if (err) console.error(err)
else
process.chdir(argument3),
//build component.html
fs.writeFile(argument3 + ".component.html", `<h1> ${argument3} works! </h1>`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + argument3.white + ".component.html".white);
});
//build scss || css styling scripts
if (argument3 === "--style:css" || argument4 === "--style:css") {
// build component.css
fs.writeFile(argument3 + ".component.css", "", function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + argument3.white + ".component.css".white);
});
} else {
// build component.scss
fs.writeFile(argument3 + ".component.scss", "", function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + argument3.white + ".component.scss".white);
});
}
if (argument3 === "--style:css" || argument4 === "--style:css") {
// include component.css
fs.writeFile(argument3 + ".component.js", `import template from './${argument3}.component.html';
import controller from './${argument3}.controller.js';
import './${argument3}.component.css';
let ${argument3}Component = {
restrict: 'E',
bindings: {},
template,
controller,
controllerAs: '${argument3}Controller'
};
export default ${argument3}Component;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + argument3.white + ".component.js".white);
});
} else {
// include component.scss
fs.writeFile(argument3 + ".component.js", `import template from './${argument3}.component.html';
import controller from './${argument3}.controller.js';
import './${argument3}.component.scss';
let ${argument3}Component = {
restrict: 'E',
bindings: {},
template,
controller,
controllerAs: '${argument3}Controller'
};
export default ${argument3}Component;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + argument3.white + ".component.js".white);
});
}
//build module.js
fs.writeFile(argument3 + ".module.js", `import angular from 'angular';
import ${argument3}Component from './${argument3}.component';
const ${argument3}Module = angular.module('${argument3}', [])
.component('${argument3}', ${argument3}Component);
export default ${argument3}Module;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + argument3.white + ".module.js".white);
});
//build controller.js
fs.writeFile(argument3 + ".controller.js", `class ${argument3}Controller {
constructor() {
this.name = '${argument3}';
}
}
export default ${argument3}Controller;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + argument3.white + ".controller.js".white);
});
});
} else if (value === 'help' || value === '-help' || value === '--help' || value === '-h') {
// provide user with help
console.log(`
- gen new {{PROJECT NAME}}
- gen new {{PROJECT NAME}} --style:css
The default styling is set to SCSS.
- gen -c {{COMPONENT NAME}} --style:css
The default styling is set to SCSS.
- gen -c {{COMPONENT NAME}}
- gen v
- gen -v
- gen version
- gen --version
This reveals the current version number
- gen h
- gen -h
- gen help
- gen --version
This reveals the Angular-1.5-cli command list
`);
} else if (value === 'v' || value === 'version' || value === '-v' || value === '--version') {
//provide user with version number
console.log(packagejson.version);
} else if (value === "serve" || value === "comp") {
if (value === "serve") {
console.log('serving angular 1.5 app...');
cmd.get(
`
webpack && webpack-dev-server --content-base client/
`,
function (data) {
}
);
} else if (value === "comp") {
// user chose component
prompt.start();
prompt.get([{
name: 'name',
required: true
}], function (err, result) {
//
// Log the results.
//
var projectName = result.name
console.log(`Would you like to use 'scss or css'?`);
prompt.get([{
name: 'styling',
required: true
}], function (err, result) {
//
// Log the results.
//
var stylingVar = '';
if (result.styling === 'css') {
stylingVar = '--style:css'
} else {
stylingVar = '--style:scss'
}
console.log(`Generating component: ${projectName}`);
value = '-c';
argument3 = projectName;
argument4 = stylingVar;
//
//re-execute genScript with new values
genScript();
//
//
});
});
}
} else if (value === 'copyTo' || value === 'transferTo') {
fs.copy(`${argument3}`, `${argument4}`, function (err) {
if (err) return console.error(err)
console.log('Success:'.green + ' created:'.white + './dist/assets')
});
}else if (value === '-r' || value === 'remove') {
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
}
value = camelize(`${value}`)
argument3 = camelize(`${argument3}`)
argument4 = camelize(`${argument4}`)
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
}
// value = camelize(`${value}`)
argument3 = camelize(`${argument3}`)
argument4 = camelize(`${argument4}`)
console.log('Delete Component');
prompt.start();
console.log(`Are you sure you would like to delete ${argument3}`.red);
prompt.get([{
name: 'Answer',
required: true
}], function (err, result) {
if (err) {
return console.log(err)
}
if (result.Answer === 'yes') {
//
process.chdir(`./client/app/components`);
fs.remove(`./${argument3}`, err => {
if (err) return console.error(err)
console.log(`Deleted ${colors.red.strikethrough(`${argument3}`)}`)
//updateComponentsJS after it has deleted the component
updateComponentsJS()
})
} else if (result.Answer === 'no' || result.Answer === 'exit' || result.Answer === 'stop') {
} else {
console.log('Exiting...'.orange)
}
});
} else if (value === 'clone') {
process.chdir(`./client/app/components`);
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
}
value = camelize(`${value}`)
argument3 = camelize(`${argument3}`)
argument4 = camelize(`${argument4}`)
//updateComponentsJS with new directory name
updateComponentsJS(argument4);
fs.copy(`${argument3}`, `${argument4}`, function (err) {
if (err) return console.error(err)
console.log("Transfer complete!")
console.log("Renaming folders...")
process.chdir(`./${argument4}`);
renameComponentFiles();
});
}else if (value === '-s' || value === 'service') {
process.chdir(`./client/app`);
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
}
tempValue = 'noName';
if (argument3 === '--post' || argument3 === '--get'){
tempValue = argument3
argument3 = argument4
argument4 = tempValue
}
argument3 = camelize(`${argument3}`)
// check if services directory. If there is none then create one and move to it
fs.stat('services', function(err, stat) {
if(err == null) {
// FILE EXISTS
process.chdir('services');
if (argument4 === '--get') {
//create a GET service
mkdirp(`${argument3}`, function (err) {
process.chdir(`${argument3}`);
fs.writeFile(`${argument3}.js`, `class ${argument3}Service {
constructor($http, $q) {
ngInject';
//INIT DEPENDENCIES
this.$http = $http;
this.$q = $q;
}
getData() {
const defer = this.$q.defer();
this.$http.get('https://angular-1-5-cli.firebaseio.com/data.json')
.then((response) => {
const data = response.data;
defer.resolve(data);
})
.catch((response) => {
defer.reject(response.statusText);
});
return defer.promise;
}
}
export default ${argument3}Service;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + `${argument3}.js`.white);
// Re-Create Services.js
// 1. get list of all services
// 2. write them into the services
updateServicesJS(argument3)
});
});
} else if (argument4 === '--post') {
//create a POST service
mkdirp(`${argument3}`, function (err) {
process.chdir(argument3)
fs.writeFile(`${argument3}.js`, `class ${argument3}Service {
constructor($http, $q) {
'ngInject';
//INIT DEPENDENCIES
this.$http = $http;
this.$q = $q;
}
getData(data) {
const defer = this.$q.defer();
this.$http.post('http://httpbin.org/post', data)
.then((response) => {
const data = response.data;
defer.resolve(data);
})
.catch((response) => {
defer.reject(response.statusText);
});
return defer.promise;
}
}
export default ${argument3}Service;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + `${argument3}.js`.white);
// Re-Create Services.js
// 1. get list of all services
// 2. write them into the services
updateServicesJS(argument3)
});
});
} else {
// no type specified
mkdirp(`${argument3}`, function (err) {
process.chdir(argument3)
fs.writeFile(`${argument3}.js`, `class ${argument3}Service {
constructor() {
'ngInject';
}
}
export default ${argument3}Service;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + `${argument3}.js`.white);
// Re-Create Services.js
// 1. get list of all services
// 2. write them into the services
updateServicesJS(argument3)
});
});
}
} else if(err.code == 'ENOENT') {
// FILE DOES NOT EXIST
mkdirp("services", function (err) {
console.log(" 🎁 created: ".cyan + "services/config".white);
process.chdir('services');
if (argument4 === '--get') {
//create a GET service
mkdirp(`${argument3}`, function (err) {
process.chdir(`${argument3}`);
fs.writeFile(`${argument3}.js`, `class ${argument3}Service {
constructor($http, $q) {
'ngInject';
//INIT DEPENDENCIES
this.$http = $http;
this.$q = $q;
}
getData() {
const defer = this.$q.defer();
this.$http.get('https://angular-1-5-cli.firebaseio.com/data.json')
.then((response) => {
const data = response.data;
defer.resolve(data);
})
.catch((response) => {
defer.reject(response.statusText);
});
return defer.promise;
}
}
export default ${argument3}Service;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + `${argument3}.js`.white);
// Re-Create Services.js
// 1. get list of all services
// 2. write them into the services
updateServicesJS(argument3)
});
});
} else if (argument4 === '--post') {
//create a POST service
mkdirp(`${argument3}`, function (err) {
process.chdir(argument3)
fs.writeFile(`${argument3}.js`, `class ${argument3}Service {
constructor($http, $q) {
'ngInject';
//INIT DEPENDENCIES
this.$http = $http;
this.$q = $q;
}
getData(data) {
const defer = this.$q.defer();
this.$http.post('http://httpbin.org/post', data)
.then((response) => {
const data = response.data;
defer.resolve(data);
})
.catch((response) => {
defer.reject(response.statusText);
});
return defer.promise;
}
}
export default ${argument3}Service;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + `${argument3}.js`.white);
// Re-Create Services.js
// 1. get list of all services
// 2. write them into the services
updateServicesJS(argument3)
});
});
} else {
// no type specified
mkdirp(`${argument3}`, function (err) {
process.chdir(argument3)
fs.writeFile(`${argument3}.js`, `class ${argument3}Service {
constructor() {
'ngInject';
}
}
export default ${argument3}Service;`, function (err) {
if (err) {
return console.log(` ❌ failed to generate due to error: ${err}`);
}
console.log(" 🎁 created: ".cyan + `${argument3}.js`.white);
// Re-Create Services.js
// 1. get list of all services
// 2. write them into the services
updateServicesJS(argument3)
});
});
}
});
} else {
console.log('Error: ', err.code);
}
});
// take name given and typ and create service (POST or GET request)
}else if (value === 'update' && argument3 === 'components.js') {
updateComponentsJS()
} else {
//promt user to find out what they want to generate
console.log(`You can always type 'gen new {{PROJECT NAME}} for a new project or 'gen -c {{COMPONENT NAME}}'`.white);
prompt.start();
console.log(`Would you like to generate a 'project' or 'component' ?`.red);
prompt.get([{
name: 'type',
required: true
}], function (err, result) {
//
// Log the results.
//
if (result.type === `project` || result.type === `Project`) {
// user chose project
prompt.start();
prompt.get([{
name: 'name',
required: true
}], function (err, result) {
//
// Log the results.
//
var projectName = result.name
console.log(`Would you like to use 'scss or css'?`);
prompt.get([{
name: 'styling',
required: true
}], function (err, result) {
//
// Log the results.
//
var stylingVar = '';
if (result.styling === 'css') {
stylingVar = '--style:css'
} else {
stylingVar = '--style:scss'
}
console.log(`Generating project: ${projectName}`);
value = 'new';
argument3 = projectName;
argument4 = stylingVar;
//
//re-execute genScript with new values
genScript();
//
//
});
});
} else if (result.type === `component` || result.type === `Component`) {
// user chose component
prompt.start();
prompt.get([{
name: 'name',
required: true
}], function (err, result) {
//
// Log the results.
//
var projectName = result.name
console.log(`Would you like to use 'scss or css'?`);
prompt.get([{
name: 'styling',
required: true
}], function (err, result) {
//
// Log the results.
//
var stylingVar = '';
if (result.styling === 'css') {
stylingVar = '--style:css'
} else {
stylingVar = '--style:scss'
}
console.log(`Generating component: ${projectName}`);
value = '-c';
argument3 = projectName;
argument4 = stylingVar;
//
//re-execute genScript with new values
genScript();
//
//
});
});
} else {
console.log(`Please try again. Unfortunately I do not understand what you would like me to do for you...`.red);
}
});
}
//end of genScript
};
function renameComponentFiles() {
var fileTypes = ['component.html', 'component.js', 'component.scss', 'module.js', 'controller.js']
//0
console.log(`Reading ${argument3}.${fileTypes[0]} file`)
fs.readFile(`${argument3}.${fileTypes[0]}`, 'utf8', function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace(new RegExp(argument3, 'g'), `${argument4}`);
console.log(`Writing ${argument4}.${fileTypes[0]} file`)
fs.writeFile(`${argument4}.${fileTypes[0]}`, result, 'utf8', function (err) {
if (err) return console.log(err);
});
});
//1
console.log(`Reading ${argument3}.${fileTypes[1]} file`)
fs.readFile(`${argument3}.${fileTypes[1]}`, 'utf8', function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace(new RegExp(argument3, 'g'), `${argument4}`);
console.log(`Writing ${argument4}.${fileTypes[1]} file`)
fs.writeFile(`${argument4}.${fileTypes[1]}`, result, 'utf8', function (err) {
if (err) return console.log(err);
});
});
//2
console.log(`Reading ${argument3}.${fileTypes[2]} file`)
fs.readFile(`${argument3}.${fileTypes[2]}`, 'utf8', function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace(new RegExp(argument3, 'g'), `${argument4}`);
console.log(`Writing ${argument4}.${fileTypes[2]} file`)
fs.writeFile(`${argument4}.${fileTypes[2]}`, result, 'utf8', function (err) {
if (err) return console.log(err);
});
});
//3
console.log(`Reading ${argument3}.${fileTypes[3]} file`)
fs.readFile(`${argument3}.${fileTypes[3]}`, 'utf8', function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace(new RegExp(argument3, 'g'), `${argument4}`);
console.log(`Writing ${argument4}.${fileTypes[3]} file`)
fs.writeFile(`${argument4}.${fileTypes[3]}`, result, 'utf8', function (err) {
if (err) return console.log(err);
});
});
//3
console.log(`Reading ${argument3}.${fileTypes[4]} file`)
fs.readFile(`${argument3}.${fileTypes[4]}`, 'utf8', function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace(new RegExp(argument3, 'g'), `${argument4}`);
console.log(`Writing ${argument4}.${fileTypes[4]} file`)
fs.writeFile(`${argument4}.${fileTypes[4]}`, result, 'utf8', function (err) {
if (err) return console.log(err);
});
});
fs.remove(`./${argument3}.${fileTypes[0]}`, err => {
if (err) return console.error(err)
console.log(`Deleted ${colors.red.strikethrough(`${argument3}`)}`)
})
fs.remove(`./${argument3}.${fileTypes[1]}`, err => {
if (err) return console.error(err)
console.log(`Deleted ${colors.red.strikethrough(`${argument3}`)}`)
})
fs.remove(`./${argument3}.${fileTypes[2]}`, err => {
if (err) return console.error(err)
console.log(`Deleted ${colors.red.strikethrough(`${argument3}`)}`)
})
fs.remove(`./${argument3}.${fileTypes[3]}`, err => {
if (err) return console.error(err)
console.log(`Deleted ${colors.red.strikethrough(`${argument3}`)}`)
})
fs.remove(`./${argument3}.${fileTypes[4]}`, err => {
if (err) return console.error(err)
console.log(`Deleted ${colors.red.strikethrough(`${argument3}`)}`)
})
}
// update services.js
function updateServicesJS(newFileName) {
console.log(" 🔰 updating: ".cyan + "components.js".white);
if (process.cwd().includes('client/app/services') === false) {
process.chdir(`./client/app/services`);
}
if (process.cwd().includes(`client/app/services/${newFileName}`) === true) {
process.chdir('..');
}
componentsArray = [];
genArr = [];
// sync with updates
fs.readdir(process.cwd(), function (err, items) {
genArr = items;
generateDirectArray(genArr);
});
function generateDirectArray(items) {
for (var i = 0; i < items.length; i++) {
if (isDirectory(items[i])) {
} else {
componentsArray.push(items[i]);
}
}
importStringGenerator();
}
function isDirectory(inputString) {
var str = inputString;
var patt = new RegExp("[.]");
var res = patt.test(str);
return res;
}
function importStringGenerator() {
genString = "";
for (var i = 0; i < componentsArray.length; i++) {
genString = genString + `import ${componentsArray[i]}Service from './${componentsArray[i]}/${componentsArray[i]}';\r`
}
listString = "";
for (var i = 0; i < componentsArray.length; i++) {
// check if last in list in order to not include comma
if (i === (componentsArray.length - 1)) {
listString = listString + ` .service('${componentsArray[i]}Service', ${componentsArray[i]}Service);` + `\r`
} else {
listString = listString + ` .service('${componentsArray[i]}Service', ${componentsArray[i]}Service)` + `\r`
}
}
fs.writeFile("services.js", `import angular from 'angular';
${genString}
const ServicesModule = angular.module('app.services', [])
${listString}
export default ServicesModule;`, function (err) {
if (err) {
return console.log(` ❌ failed to update due to error: ${err}`);
}
console.log(" 🔰 updated: ".cyan + "services.js".white);
});
}
}
//re-write/update components.js
function updateComponentsJS(newFileName) {
console.log(" 🔰 updating: ".cyan + "components.js".white);
if (process.cwd().includes('client/app/components') === false) {
process.chdir(`./client/app/components`);
}
componentsArray = [];
genArr = [];
// sync app.component with updates
fs.readdir(process.cwd(), function (err, items) {
genArr = items;
generateDirectArray(genArr);
});
function generateDirectArray(items) {
for (var i = 0; i < items.length; i++) {
if (isDirectory(items[i])) {
} else {
componentsArray.push(items[i]);
}
}
importStringGenerator();
}
function isDirectory(inputString) {
var str = inputString;
var patt = new RegExp("[.]");
var res = patt.test(str);
return res;
}
String.prototype.capitalizeFirstLetter = function () {
ret