startit
v1.2.1
✔ Simple starter project enabling faster delivery of projects and/or:
- automatic deployment of GitHub Pages
- publish release to GitHub
This provides an example project which automates tasks with gulp including:
This project have some requerements you need to meet in order to compile it.
In order to start using the project you need to clone it to your pc with the git command, replace [your-project] with your project name:
git clone https://github.com/adorade/startit.git [your-project]Navigate to the folder:
cd [your-project]Install dependencies:
yarn installNote that module versions have been fixed to guarantee compatibility. Run yarn outdated and update package.json as necessary.
To start using it, the only thing you need to do is open the project on you code editor of choice and code. To compile and live preview all your changes you have some command that will help you. Here are the list of commands you should know.
Every command have to be executed on the root directory of the project using the gulp command like gulp cleaner or gulp build:
| Task | Description |
|---|---|
| cleaner | Remove all the compiled files |
| linter | Lint styles, scripts and pug files |
| styles | Compile the Sass styles |
| scripts | Compile the JavaScript files |
| fonts | Copy fonts |
| statics | Copy static files |
| images | Optimize images |
| pages | Compile the Pug templates |
| serve | Start the server and watch for any changes |
| build | Build the project |
| dev | Compile and watch for changes |
| deploy | Deploy files to Github Pages |
| release | Publish release to GitHub |
| default | Default gulp task |
| checks | Check gulp configuration |
| help | Print help message |
Run gulp --tasks to see all available gulp tasks.
If you are in development, the gulp dev command is the best choice for you. Go to the project folder in the console and execute gulp dev, it will compile the project and start a server that will refresh every time you change something in the code.
Gulp will be watching for changes and will tell you how to access the project from local and public url.
Every browser that point to that url will be auto refreshed. As an extra feature for testing purpose any interaction on one browser will be reflected on any others. Try it on a phone, tablet and pc at the same time.
The project have a very simple and flexible structure. If the default place for any file or directory needs to be moved, be sure to update to the new position on the tool/util/config.js file.
├── dist -> All the compiled files will be placed here (Production)
├── logs -> Logs files
├── src -> Source files for the project
│ ├── es6 -> Scripts
│ ├── fonts -> Fonts
│ ├── images -> Images
│ ├── scss -> Sass
│ ├── static -> Favicons...
│ ├── vendors -> Vendors folder for all the dependencies
│ └── views -> Templates directory for Pug files
├── test -> Tests Files
├── tmp -> All the compiled files will be placed here (Development)
├── tools -> Project tools and configuration
│ ├── build -> files for build
│ ├── tasks -> tasks files for gulp
│ └── util -> config and options for project
├── package.json -> NodeJS configuration file
├── gulpfile.esm.js -> Gulp tasks
├── README.md -> README
└── ... config files for packagesAll the files in the dist and tmp folders will be auto-generated by the different tasks when the project compiles. Be sure to not modify any file manually in these folders because changes will be replaced on the compile process.
This project have some nice configuration options to meet all you needs. To configure you need to edit the following files and change any value you need:
tool/util/banner.js - banner for scripts and styles filestool/util/config.js - project configurationtool/util/options.js - options for pluginsAfter each change you've made, check with gulp checks if everything is in order and there are no errors.
Every aspect of this configuration is described in the file so that you know the options.
Run in live-reloading development mode:
yarn run start
# or
gulp
# or
gulp devNavigate to http://localhost:1234/ or the External URL if accessing from another device.
Find full list of tasks:
gulp -T
# or
gulp -T --tasks-depth 0Set NODE_ENV to production so Gulp tasks produce final code, i.e. minify files, and disable sourcemap generation.
yarn run build
# or
gulp build --productionSet NODE_ENV to production manually depending on your OS:
Linux/Mac OS:
NODE_ENV=production
gulp build(or inline NODE_ENV=production gulp build)
Windows Powershell:
$env:NODE_ENV="production"
gulp buildWindows legacy command line:
set NODE_ENV=production
gulp buildTo automatically deploy your project to GitHub Pages and make it available at https://[your-username].github.io/[your-project-name] use:
yarn run deploy
# or
gulp build --production && gulp deployTo publish release to GitHub use:
yarn run release
# or
gulp releaseThis project is licensed under the MIT License
