Simply create your project with gulp and add your needs (concat, minify, sass,...) via tasks.
npm i -g create-gulp-project in your terminal.
To create a new project run
create-gulp-project in your terminal.
The project will be set up in the working directory you currently are.
After executing the command you will be prompted with a few questions, about the directory structure and some more information if there is not already a package.json file in this folder.
When the creation is complete run
npm i to install the dependencies.
Config file and Modules
The config file stores the directory structure and the modules that should be used.
It is created after running
You can specify the modules in this config, but it is preferred to add and remove them via
gulp add -[name] &
gulp remove -[name] to run init scripts provided by the modules.
If you want to add or remove more than one script, you can put them behind add leading with a hyphen:
gulp add -server -minify -sass
gulp build you can build your project to the specified build directory (default: dist).
This build task is running the main build tasks (build-css, build-html, build-js) and maybe other tasks if the added modules specified one. The directory names and paths in the build are the same as specified in the cgpfile.json, except for the html and resources path, which is always the root of the build directory.
Example directory structure:
Directory structure for the example cgpfile.json above.
app/ ├── css │ └── main.css ├── dist │ ├── css │ │ └── main.min.css │ ├── images │ │ └── star.svg │ ├── index.html │ └── js │ └── main.min.js ├── index.html ├── js │ └── main │ ├── test1.ts │ └── test2.js ├── pages │ └── index.njk ├── res │ └── images │ └── star.svg ├── sass │ └── main.scss └── templates └── layout.njk
If you run
gulp watch only the underlying build tasks that are needed for the updated files are executed.
gulp watch does not clean the build directory, because of that you should once run
gulp build before the build is production ready.
Enables css autoprefixing in the build.
Concatenates all files that are in a folder. The output file is names after the folder.
order: Array of file names that should be ordered relative to the corresponding build directory.
buildTasks: Specifies what build processes should be concatenated (Default: ["js", "css"])
├── dist │ └── js │ ├── other.js │ └── main.js ├── js │ ├── main │ │ ├── test1.js │ │ └── test2.js │ └── other.js
Compresses png, jpg, svg and gif images that are in the resources folder.
Minifies the sources for the given build tasks. Adds a .min.js extension to the output file.
- buildTasks: Specifies what build processes should be concatenated (Default: ["js", "css", "html"])
Html template engine. For more information visit Nunjucks.
The html output is going to the specified html directory that is set in cgpfile.json.
By adding the module via
gulp add -nunjucks, the pages and template directory is created with example nunjucks files.
- pagesDir: The directory where the pages live (Default: "./pages")
- templateDir: The directory where the templates live (Default: "./templates")
Sass preprocessor. For more information visit Sass. The css output is going to the specifies css directory that is set in cgpfile.json.
- sassDir: The directory where the scss files live (Default: "./sass")
Development server that supports livereload.
- port: Defines the port that the server is using (Default: 3500)
You can configure babel within the .babelrc file.
You can configure JsHint within the .jshintrc file.