我有一个我刚写的 gulp 文件,我是新手。它正在工作,但我的任务比我认为需要的要多。
任何人都可以帮我将javascript任务串在一起作为一项任务吗?
完成后,我需要四个单独的 js 文件。
gulpfile.js 中的相关代码片段:
var gulp = require('gulp')
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
del = require('del');
gulp.task('clean', function(cb) {
del(['css/*', 'js/min/*'], cb)
});
gulp.task('featuretest', function() {
return gulp.src('js/feature-test.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
});
// This file: '/js/excanvas.min.js' is only loaded via lte IE8 conditional statement
gulp.task('excanvas', function() {
return gulp.src('js/polyfills/excanvas.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
});
// This file: '/js/charts.min.js' is only used on very few pages
gulp.task('charts', function() {
return gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])
.pipe(concat('charts.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
});
// This file: '/js/main.min.js' is a concat of 'libs/jquery', a few polyfills (except excanvas.js and the highcharts)
gulp.task('scripts', function() {
return gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('watch', function() {
// Watch .js files
gulp.watch('js/**/*.js', ['featuretest', 'excanvas', 'charts', 'scripts']);
});
gulp.task('default', ['clean'], function() {
gulp.start('featuretest', 'excanvas', 'charts', 'scripts');
});
我想做的是:
var gulp = require('gulp')
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
del = require('del');
gulp.task('clean', function(cb) {
del(['css/*', 'js/min/*'], cb)
});
gulp.task('scripts', function() {
// This file: '/js/feature-test.js' is loaded in the doc <head>
return gulp.src('js/feature-test.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
// This file: '/js/excanvas.min.js' is only loaded via lte IE8 conditional statement at the end of the doc
return gulp.src('js/polyfills/excanvas.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
// This file: '/js/charts.min.js' is only used on very few pages and is loaded only when needed at the end of the doc
return gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])
.pipe(concat('charts.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
// This file: '/js/main.min.js' is a concat of 'libs/jquery', a few polyfills (except excanvas.js and the high charts), it is loaded at the end of every doc
return gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/min'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('watch', function() {
// Watch .js files
gulp.watch('js/**/*.js', ['scripts']);
});
gulp.task('default', ['clean'], function() {
gulp.start('scripts');
});