建立應用程式的簡單 Gulp 路徑

在執行 gulp 之前,你需要安裝 Node.JSnpm

Gulp.js 的負責人是:

var gulp = require('gulp');
    clean = require('gulp-clean'); // A gulp plugin for removing files and folders.
    imagemin = require('gulp-imagemin'); // Minify PNG, JPEG, GIF and SVG images

然後分配 gulp 檔案的路徑

var bases = {
 app: 'app/',        // path to your app
 dist: 'dist/',      // path to the compiled application
};

var paths = {
 scripts: ['scripts/**/*.js', '!scripts/libs/**/*.js'],
 libs: ['scripts/libs/jquery/dist/jquery.js', 'scripts/libs/underscore/underscore.js', 'scripts/backbone/backbone.js'],
 styles: ['styles/**/*.css'],
 html: ['index.html', '404.html'],
 images: ['images/**/*.png'],
 extras: ['crossdomain.xml', 'humans.txt', 'manifest.appcache', 'robots.txt', 'favicon.ico'],
};

例 1:

// Copy all other files to dist directly
    gulp.task('copy', ['clean'], function() {
 // Copy html
       gulp.src(index.html)
         .pipe(gulp.dest(bases.dist)); // same as .pipe(gulp.dest('dist'));
    });

例 2:

// Imagemin images and ouput them in dist
gulp.task('imagemin', ['clean'], function() {
 gulp.src(paths.images, {cwd: bases.app})
 .pipe(imagemin())
 .pipe(gulp.dest(bases.dist + 'images/')); // same as .pipe(gulp.dest('dist/images/'));
});

預設手錶

// Define the default task as a sequence of the above tasks
gulp.task('default', ['clean', 'imagemin', 'copy']);