gulp-tasks-scaffold v1.2.26
gulp-tasks-scaffold (WIP)
Simple wrapper for common gulp tasks with a very easy-to-use api
This is a very simple wrapper around gulp tasks to get rid of all of that piping bloat. I aimed to include at least all of the common tasks that I use.
Official Repo for this Package: gulp-tasks-scaffold
Example repo using this package: gulp-starter
I may create official documentation pages for this as well as it will probably get too large for a readme.
Getting Started
Install
npm install gulp
npm install gulp-tasks-scaffold
How To Use:
This package comes with a ton of npm dependencies which can be used by importing the gulp-tasks-scaffold
package into your gulpfile.js
Ex:
import gulp from 'gulp-tasks-scaffold';
// Or
var gulp = require('gulp-tasks-scaffold');
You will then have access to all of the gulp tasks by accessing the imported gulp object: gulp.Whatevertask
Tasks:
Copy Task:
Copies files from one directory to another
gulp.Copy(
'copy', // taskName
[ // files
{
src: './node_modules/bootstrap-sass/assets/stylesheets/**/*.scss', // fileSrc
dest: 'src/sass/vendor/bootstrap' // fileDest
}
]
);
Parameters:
- taskName: string
- files: Array of Objects with src and dest attributes
- fileSrc: string
- fileDest: string
Html Task:
Swaps out script and css links depending on environment && minifies files.
gulp.Html(
'html', // taskName
'src/html/**/*', // htmlSource
'dist/html', // htmlOutput
'../css/app.css', // compiledCssPath
'../js/app.js' // compiledJsPath
);
Parameters:
- taskName: string
- htmlSource: string
- htmlOutput: string
- compiledCssPath: string (relative to output html file)
- compiledJsPath: string (relative to output html file)
Note:
You must have these comment code blocks in your html to find and replace css && js links.
<!-- build:css -->
<link rel="stylesheet" href="../dist/css/app.css">
<!-- endbuild -->
<!-- build:js -->
<script src="../dist/js/app.js"></script>
<!-- endbuild -->
Run gulp taskName
--production to change the links to use app.min.css
for CSS && app.min.js
for JS
Sass Task:
Compiles SASS with sourcemaps and minifies SASS with --production flag
gulp.Sass(
'sass', // taskName
'src/sass/**/*.scss', // sassPath
'dist/css/', // cssOutputPath
'app.css' // cssOutputFileName
);
Parameters:
- taskName: string
- sassPath: string
- cssOutputPath: string
- cssOutputFileName: string
Note:
Run gulp taskName
--production to minify files and exclude sourcemaps.
This will create .min.css
extension on the output CSS file.
Concat Task:
Concatenates either JS or CSS files and minifies with --production flag
gulp.Concat(
'scripts', // taskName
'src/js/*.js'// srcPath
'dist/js/'// outputPath
'scripts.js'// outputFileName
);
Parameters:
- taskName: string
- srcPath: string
- outputPath: string
- outputFileName: string
Browserify Task:
Browserify JS files with sourcemaps and minifies JS with --production flag
gulp.Browserify(
'browserify', // taskName
'src/js/scripts.js', // srcPath
'dist/js/', // outputPath
'app.js', // outputFileName
['babelify', 'vueify'] // browserifyTransforms
['tsify'] // browserifyPlugins
);
Parameters:
- taskName: string
- srcPath: string || Array
- outputPath: string
- outputFileName: string
- browserifyTransforms: Array of strings
- browserifyPlugins: Array of strings
Scsslint Task:
Lints JS files with .eslintrc rules
gulp.Scsslint(
'scsslint', // taskName
'src/scss/**/*.scss', // scssPath
'src/scss/vendor/**', // ignorePath
'.scss-lint.yml' // linterFilePath
);
Parameters:
- taskName: string
- scssPath: string
- ignorePath: string
- linterFilePath: string
Eslint Task:
Lints JS files with .eslintrc rules
gulp.Eslint(
'eslint', // taskName
'src/js/**/*.{js,vue}', // jsPath
'src/js/vendor/**', // ignorePath
'.eslintrc' // linterFilePath
);
Parameters:
- taskName: string
- jsPath: string
- ignorePath: string
- linterFilePath: string
Tslint Task:
Lints JS files with tslint rules
gulp.Tslint(
'tslint', // taskName
'src/ts/**/*.ts', // tsPath
'src/ts/vendor/**', // ignorePath
'tslint.json' // linterFilePath
);
Parameters:
- taskName: string
- tsPath: string
- ignorePath: string
- linterFilePath: string
Clean Task:
Deletes files or directories
gulp.Clean(
'clean', // taskName
[ // files
'dist/js/*',
'dist/css/*',
'src/scss/vendor/*',
'src/js/vendor/*',
]
);
Parameters:
- taskName: string
- files: Array of strings
Default Task:
Tasks that are run by default when running gulp
gulp.Default(
[ // tasks
'copy',
'scsslint',
'sass',
'eslint',
'browserify',
'html'
]
);
Watch Task:
gulp.Watch(
[ // tasksToRunBeforeWatch
'scsslint', // taskName
'sass',
'eslint',
'browserify',
],
[ // tasksToWatch
{
path: 'src/js/**/*.{js,vue}', // pathToWatchForChanges
tasks: ['eslint', 'browserify'] // tasksToRunOnChange
},
{
path: 'src/sass/**/*.scss', // pathToWatchForChanges
tasks: ['scsslint', 'sass'] // tasksToRunOnChange
},
]
);
More to come...
The documentation tends to fall behind what has actually been implemented. If you want to see what other tasks this comes with, checkout the gulp-starter repo and take a look at the source files, I usually try to include decent docblocks.
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago