https://github.com/dperrymorrow/gulp-task-generator
CLI tool for setting up your Gulp tasks
https://github.com/dperrymorrow/gulp-task-generator
cli gulp-tasks series
Last synced: 12 months ago
JSON representation
CLI tool for setting up your Gulp tasks
- Host: GitHub
- URL: https://github.com/dperrymorrow/gulp-task-generator
- Owner: dperrymorrow
- License: mit
- Created: 2016-02-10T22:06:17.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-27T04:53:07.000Z (almost 10 years ago)
- Last Synced: 2025-02-12T05:27:12.142Z (over 1 year ago)
- Topics: cli, gulp-tasks, series
- Language: JavaScript
- Homepage:
- Size: 171 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gulp Task Generator
A command line tool that builds your gulpfile to your exact needs by asking you a series of questions.
## Supported Tasks
- Jade
- EJS
- Less
- Sass
- Stylus
- Autoprefix
- Coffescript
- Babel
- Concatenation
- Uglify
- Sourcemaps
## Installing:
```
$ npm install gulp-task-generator -g
```
now change directories to your project and run the setup
```
$ gulp-task-generator
```
Gulp-Task-Generator will now ask you a series of questions about your project and build your gulpfile.js accordingly.
```
$ gulp-task-generator
------------------------------- QUESTIONS -------------------------------
? You already have a Gulpfile.js. Overwrite? Yes
? Would you like to run CSS tasks? Yes
? Which CSS pre-processor would you like to use? less
? Would you like to autoprefix your CSS? Yes
? Would you like your CSS minified? Yes
? Would you like your CSS files concatenated? Yes
? Name of your concatenated CSS file? main.css
? Where are your CSS source files? source/less
? Where do you want your compiled CSS (generated) files? build/css
? Would you like to run Javascript tasks? Yes
? Will you be using Coffeescript? Yes
? Convert ES6 to ES5? Yes
? Would you like to run JsHint on your Javascript? Yes
? Would you like to concatenate and minify your Javascript? Yes
? Name of your concatenated js file? main.js
? Where are your .coffee source files? source/coffee
? Where do you want your compiled Javascript (generated) files? build/js
? Would you like to use a template engine for HTML? Yes
? Which HTML template engine would you like to use? jade
? Where are your .jade source files? source/jade
? Where do you want your compiled HTML (generated) files? build/
------------------------- CREATING DIRS & FILES -------------------------
/source/coffee => created
/build/js => created
/source/less => created
/build/css => created
/source/jade => created
/build/ => created
gulpfile.js => created
------------------------ INSTALLING DEPENDENCIES ------------------------
> Installing the NPM packages based on your choices.
\generator-test@1.0.0 /Users/dperrymorrow/builds/generator-test
├── gulp@3.9.1
├── gulp-autoprefixer@3.1.0
├── gulp-babel@6.1.2
├── gulp-clean-css@2.0.12
├── gulp-coffee@2.3.2
├── gulp-concat@2.6.0
├── gulp-jade@1.1.0
├── gulp-jshint@2.0.1
├── gulp-less@3.1.0
├── gulp-notify@2.2.0
├── gulp-plumber@1.1.0
├── gulp-rename@1.2.2
├── gulp-sourcemaps@1.6.0
├── gulp-uglify@1.5.4
└── jshint@2.9.2
> All NPM packages have been installed.
To use your new Gulp tasks:
$ npm install -g gulp
$ gulp
```
The packages needed to run your gulpfile have been added to your npm package.json file as dependencies, and have been installed via ``npm install``
## Usage
```bash
$ npm install -g gulp
$ gulp
```
## gulpfile.js
The above choices would have resulted in the following ``gulpfile.js``
```javascript
/*
=================================================
gulpfile.js created with Gulp-Task-Generator
https://www.npmjs.com/package/gulp-task-generator
To regenerate this file:
$ cd {this dir}
$ npm install -g gulp-task-generator
$ gulp-task-generator
=================================================
*/
"use strict";
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
const notify = require('gulp-notify');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const autoPrefixer = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css');
const less = require('gulp-less');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const coffee = require('gulp-coffee');
const babel = require('gulp-babel');
const jade = require('gulp-jade');
gulp.task('css', () => {
gulp.src(['source/less/**/*.less'])
.pipe(plumber({
handleError: err => {
console.log(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(autoPrefixer())
.pipe(concat('main.css'))
.pipe(gulp.dest('build/css'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCss())
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/css'))
.pipe(notify('css task finished'))
});
gulp.task('js', () => {
gulp.src(['source/coffee/**/*.coffee'])
.pipe(plumber({
handleError: (err) => {
console.log(err);
this.emit('end');
}
}))
.pipe(coffee({bare: true}))
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest('build/js'))
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(babel())
.pipe(gulp.dest('build/js'))
.pipe(notify('js task finished'))
});
gulp.task('html', () => {
gulp.src(['source/jade/**/*.jade'])
.pipe(plumber({
handleError: err => {
console.log(err);
this.emit('end');
}
}))
.pipe(jade())
.pipe(gulp.dest('build/'))
});
gulp.task('default', ["js","css","html"], () => {
gulp.watch('source/coffee/**/*.coffee', ['js']);
gulp.watch('source/less/**/*.less', ['css']);
gulp.watch('source/jade/**/*.jade', ['html']);
});
```
You can then invoke the tasks with ``$ gulp`` or run individual gulp tasks.
And, of course you can edit your gulpfile.js further for more customization, it is your gulpfile after all, Gulp-Generator just helps you build it.
## Contributing
- fork the repo
- npm install
To test, from a test directory,
```bash
node ../gulp-task-generator/bin/cli.js
```