Starter Project CLI creates a perfect Gulp development environment within a few minutes.
Starter Project CLI creates a perfect Gulp development environment for everyone within a few minutes.
Starter Project CLI, or SPRO (pronounces es-pro), is a command line interface that could save you a vast amount of time that you usually spend on configuring your project. SPRO's mission is to set up a perfect development environment by learning about your project architecture and then setting up Gulp tasks for all your needs.
SPRO should be considered as a boilerplate of predefined Gulp tasks. SPRO would install Gulp tasks for processing the following file types:
The tasks include compiling, lintering, formatting, compressing, and transforming your source file to produce the most optimized production files.
Info: If you would like to add a Gulp task, feel free to open a pull request, or request a feature by creating a new issue.
You could use SPRO as a global or local package.
To install the package locally, run:
npm install starter-project-cli --save
To install the package globally, run:
npm install --global starter-project-cli --save
After successful installation, you could run the spro
command. If you have installed the package locally, you could initialize the package by running the following command:
node_modules/.bin/spro start
If you have installed the package globally, you could initialize the package by running the following command:
spro start
SPRO would prompt you to ask a few questions about the project structure.
Once you answer all questions, SPRO would do two things:
Warning: Note that the installation process could last a few minutes.
In the gulpfile.js
folder you could find all Gulp task files and configuration files.
There are four available major Gulp tasks:
Task | Description |
---|---|
default |
the task for running all the tasks (useful for more thorough development process) |
build |
the task for running all tasks with the exit process (useful for Netlify builds, for example) |
dev |
the task for running only essential tasks (useful for basic development process) |
clean |
the task for deleting compiled code. |
And there are three optional Gulp tasks for versioning (available only you choose SEMVER option):
Task | Description |
---|---|
bumpPatch |
the task for bumping patch versions of the package.json file |
bumpMinor |
the task for bumping minor versions of the package.json file |
bumpMajor |
the task for bumping major versions of the package.json file |
Pro tip: Run gulp --tasks
to see all available Gulp tasks.
If you want more control over your Gulp tasks, you could find the configuration files for every single Gulp task in the gulpfile.js
folder.
.starter-project.json
is the main configuration file in which you could find all your answers from the command line.
{
"proot": "./",
"src": "src",
"dist": "dist",
"sync": {
"run": true
},
"html": {
"run": true,
"src": "html",
"dist": "",
"pug": false,
"minify": true,
"inline": true,
"lint": true
},
"css": {
"run": true,
"src": "scss",
"dist": "css",
"sass": true,
"minify": true,
"autoprefix": true,
"sourcemaps": true,
"lint": true
},
"js": {
"run": true,
"src": "js",
"dist": "js",
"uglify": true,
"lint": true,
"sourcemaps": true
},
"gfx": {
"run": true,
"src": "gfx",
"dist": "gfx"
},
"fonts": {
"run": true,
"src": "fonts",
"dist": "fonts"
},
"favicon": {
"run": true
},
"critical": {
"run": true
},
"kss": {
"run": true,
"dist": "docs/styleguide"
},
"sassdoc": {
"run": true,
"dist": "docs/sass"
},
"jsdoc": {
"run": true,
"dist": "docs/js"
},
"bump": {
"run": true
}
}
Avoid editing this file manually, unless you know what you are doing. Run spro start
command again instead.
See more about individual configuring tasks in the Task Configuration section.
SPRO provides path placeholders for easier configuration. All path placeholders would be replaced with settings from the main config file, .starter-project.json
file.
Use path placeholders to avoid hardcoding paths in the project.
Here is the list of all available path placeholders:
Placeholder | Replacement |
---|---|
helpers.proot |
project root path |
helpers.source |
project source path |
helpers.dist |
project destination path |
config.html.src |
project HTML source path |
config.html.dist |
project HTML source path |
config.css.src |
project CSS source path |
config.css.dist |
project CSS destination path |
config.js.src |
project JavaScript source path |
config.js.dist |
project JavaScript destination path |
config.kss.dist |
project KSS destination path |
config.sassdoc.dist |
project SassDoc destination path |
config.jsdoc.dist |
project JSdoc destination path |
SPRO package has only one command:
spro start
, spro s
.Also, you could run spro --version
to check the version of the package.
Every task has its own configuration file.
The default BrowserSync configuration is defined as follows:
{
"port": 8080,
"server": {
"baseDir": ""
}
}
You could see all available options on BrowserSync the npm page.
The default favicon configuration is defined as follows:
{
"run": true,
"src": "helpers.source/config.html.src/_assets/favicon.pug",
"dest": "helpers.source/config.html.src/_assets"
}
To make the favicon task work, you should visit the RealFaviconGenerator and run the wizard. At the end of the process, you should copy the setting and put them in the .favicon-data.json
file under gulpfile.js
directory.
If you need more help understanding the configuration, please open a new issue.
The default HTML configuration is defined as follows:
{
"pugConfig": {
"basedir": "",
"pretty": true
},
"htmllintConfig": {
"config": "",
"failOnError": false
},
"htmlminConfig": {
"collapseWhitespace": true
},
"renameConfig": {
"extname": ".html"
},
"inlineConfig": {
"rootpath": ""
}
}
If you need more help understanding the configuration, please open a new issue.
The default CSS configuration is defined as follows:
{
"sassConfig": {
"includePaths": [
"helpers.proot/node_modules/modularscale-sass/stylesheets/",
"helpers.proot/node_modules/sass-mq/",
"helpers.proot/node_modules/normalize.css/",
"helpers.source/config.css.src/",
"helpers.source/config.css.src/components/"
]
},
"styleLintConfig": {
"reporters": [{
"formatter": "string",
"console": true
}]
},
"autoprefixerConfig": {
"browsers": ["last 5 versions"],
"cascade": false
},
"renameConfig": {
"suffix": ".min"
}
}
If you need more help understanding the configuration, please open a new issue.
The default JavaScript configuration is defined as follows:
{
"eslintConfig": {
"configFile": "helpers.proot/.eslintrc.json",
"fix": true,
"quiet": true
},
"includeConfig": {
"hardFail": true,
"includePaths": [
"helpers.proot/node_modules"
]
},
"babelConfig": {
"presets": ["@babel/env"]
},
"renameConfig": {
"suffix": ".min"
}
}
If you need more help understanding the configuration, please open a new issue.
The default images configuration is defined as follows:
{
"gifConfig": {
"interlaced": true
},
"jpegConfig": {
"quality": 90,
"progressive": true
},
"pngConfig": {
"quality": [0.8, 0.9]
},
"svgConfig": {
"plugins": [
{
"cleanupAttrs": true
},
{
"removeDoctype": true
},
{
"removeComments": true
},
{
"removeXMLProcInst": true
},
{
"removeMetadata": true
},
{
"removeTitle": false
},
{
"removeDesc": false
},
{
"removeUselessDefs": true
},
{
"removeXMLNS": false
},
{
"removeEditorsNSData": true
},
{
"removeEmptyAttrs": true
},
{
"removeHiddenElems": true
},
{
"removeEditorsNSData": true
},
{
"removeEmptyText": true
},
{
"removeEmptyContainers": true
},
{
"removeViewBox": false
},
{
"cleanupEnableBackground": true
},
{
"convertStyleToAttrs": true
},
{
"convertColors": true
},
{
"convertPathData": true
},
{
"convertTransform": true
},
{
"removeUnknownsAndDefaults": true
},
{
"removeNonInheritableGroupAttrs": true
},
{
"removeUselessStrokeAndFill": true
},
{
"removeUnusedNS": true
},
{
"cleanupIDs": false
},
{
"cleanupNumericValues": true
},
{
"cleanupListOfValues": true
},
{
"moveElemsAttrsToGroup": true
},
{
"moveGroupAttrsToElems": false
},
{
"collapseGroups": true
},
{
"removeRasterImages": true
},
{
"mergePaths": true
},
{
"convertShapeToPath": false
},
{
"sortAttrs": true
},
{
"removeDimensions": true
},
{
"removeAttrs": false
},
{
"removeElementsByAttr": false
},
{
"addClassesToSVGElement": false
},
{
"addAttributesToSVGElement": false
},
{
"removeStyleElement": false
},
{
"removeScriptElement": false
},
{
"removeDimensions": false
}
]
}
}
If you need more help understanding the configuration, please open a new issue.
The default Critical CSS configuration is defined as follows:
[{
"src": "style.css",
"settings": {
"out": "style.critical.css",
"url": "http://localhost:8080/",
"width": 1920,
"height": 1200,
"keepLargerMediaQueries": true,
"strict": false,
"blockJSRequests": false,
"phantomJsOptions": {
"ssl-protocol": "any",
"ignore-ssl-errors": true
}
}
}]
If you need more help understanding the configuration, please open a new issue.
The default Semver configuration is defined as follows:
{
"src": ["helpers.proot/package.json"]
}
If you need more help understanding the configuration, please open a new issue.
The default KSS configuration is defined as follows:
{
"title": "Starter Project",
"source": "helpers.source",
"destination": "helpers.dist/docs/styleguide/",
"css": [
"helpers.dist/config.css.dist/style.css"
],
"js": []
}
If you need more help understanding the configuration, please open a new issue.
The default SassDoc configuration is defined as follows:
{
"dest": "/docs/sass/",
"package": "package.json",
"autofill": true,
"verbose": true,
"theme": "default",
"display": {
"access": ["public", "private"],
"alias": true,
"watermark": true
},
"groups": {
"undefined": "Misc"
},
"basePath": "https://starter.silvestar.codes/docs/sass/"
}
If you need more help understanding the configuration, please open a new issue.
The default JSDoc configuration is defined as follows:
{
"src": ["helpers.source/config.js.src/homepage.md", "helpers.source/config.js.src/"],
"settings": {
"tags": {
"allowUnknownTags": true
},
"opts": {
"destination": "helpers.dist/docs/js/"
},
"plugins": [
"plugins/markdown"
],
"templates": {
"cleverLinks": true,
"monospaceLinks": false,
"default": {
"outputSourceFiles": true
},
"path": "ink-docstrap",
"theme": "simplex",
"navType": "vertical",
"linenums": true,
"dateFormat": "MMMM Do YYYY, h:mm:ss a"
}
}
}
If you need more help understanding the configuration, please open a new issue.
The default helpers configuration is defined as follows:
{
"wait": 20000
}
The default watch configuration is defined as follows:
{
"ignoreInitial": true
}
This setting will tell Gulp when to terminate the build (watch) process.
SPRO would ask you the following questions:
Every possible package for Gulp tasks:
Show your support by starring the project on GitHub, or by sharing on Twitter. 🙏
Contribute: create a new issue or create a pull request.