How to manage your workflow in shell without task runner (gulp, grunt, fly, just, etc.)
- Everything awesome related to npm scripts and using npm as a build tool
- Why I Left Gulp and Grunt for npm Scripts - Article by Cory House
- Build Automation with Vanilla JavaScript
- How to Use npm as a Build Tool - Blog post by Keith Cirkel
- Why we should stop using Grunt & Gulp
- Helpers and tips for npm run scripts - Blog post by Michael Kühnel covering advanced topics
- Advanced front-end automation with npm scripts - Talk at Nordic.js 2015 by Kate Hudson
- How to create a build system with npm scripts - Video tutorial series on setting up a front-end build system
- Ecosystem-free task runner that goes well with npm scripts
Gulp
const del = require('del');
gulp.task('clean', () => {
return del(['dist/report.csv', 'dist/mobile/**/*']);
});npm del-cli
del "dist/report.csv" "dist/mobile/**/*"npm rimraf
rimraf distShell
rm -rf "dist/report.csv" "dist/mobile"Gulp
gulp.task('eslint', () => {
return gulp.src('src/**/*.ts')
.pipe(g.eslint())
.pipe(g.eslint.format());
});npm eslint
eslint src --ext tsGulp
gulp.task('eslint:watch', (done) => {
const w = gulp.watch('src/**/*.ts', gulp.series('eslint'));
process.on('SIGINT', () => {
w.close();
done();
});
});npm watchexec-bin
watchexec -w src "npm run eslint"
7A3E
span>Taskfile/Shell
# Taskfile
eslint_watch() {
while true; do
inotifywait -r src && "npm run eslint"
done
}
"$@"sh Taskfile eslint_watchGulp
gulp.task('dev:watch', gulp.parallel('test:watch', 'eslint:watch');npm run-p
run-p test:watch eslint:watchnpm concurrently
concurrently "npm run test:watch" "npm run eslint:watch"Taskfile/Shell
# Taskfile
dev_watch() {
npm run test:watch 2>&1 &
npm run eslint:watch 2>&1 &
}
"$@"sh Taskfile dev_watchGulp
gulp.task('scripts', () => {
return gulp.src('src/**/*.ts')
.pipe(g.typescript())
.pipe(gulp.dest('dist'));
});npm typescript
tsc --project tsconfig.json --outDir distGulp
gulp.task('copy', () => {
return gulp.src('src/index.html')
.pipe(gulp.dest('dist/public'));
});Shell
mkdir -p dist/public
cp src/index.html dist/public