Gulp配置实战

1.由于华强项目维护人员变化多次，导致项目文件参差不起，每次新增需求时都需要新写gulp.task(…)，因此，借机整理了一次，放此已备用。

2.需具备一定node gulp js基础。

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    minifyHTML = require("gulp-minify-html"),
    sourcemaps = require('gulp-sourcemaps');

var SRC_DIR = './src/',
    DST_DIR = './dist/',
    JS = {
        jquery: SRC_DIR + 'res/js/global/jquery-1.8.3.min.js',
        jqcommon: SRC_DIR + 'res/js/global/jquery.common.js',
        ajax: SRC_DIR + 'res/js/global/jquery.ajaxRequest.js',
        common: SRC_DIR + 'res/js/global/common.js',
        global: SRC_DIR + 'res/js/global/global.js',
        popbox: SRC_DIR + 'res/js/global/jquery.popbox.js',
        head: SRC_DIR + 'res/js/global/head.js',
        login: SRC_DIR + 'res/js/global/login.js',
    },
    JS_ALL = [JS.jquery, JS.jqcommon, JS.ajax, JS.common, JS.global, JS.popbox, JS.head, JS.login];

/**
 * 清空目标文件夹
 */
gulp.task("clean", function() {
    return gulp.src(DST_DIR)
        .pipe(clean());
});

/**
 * 编译全部
 */
gulp.task('default', ['auto-img', 'auto-html', 'auto-css', 'auto-js']);

/**
 * 编译全部images
 */
gulp.task('auto-img', function() {
    return gulp.src(SRC_DIR + '**/*.{png,jpg,gif,ico}')
        .pipe( /*cache(*/ imagemin({ //慎用,不同文件夹内的相同图片(即使文件名不同)也会被缓存
            optimizationLevel: 5, // 优化等级0-7
            progressive: true, // 无损压缩jpg图片
            interlaced: true, // 隔行扫描gif进行渲染
        }) /*)*/ )
        .pipe(gulp.dest(DST_DIR))
});

/**
 * 编译全部html shtml
 */
gulp.task('auto-html', function() {
    return gulp.src(SRC_DIR + '**/*.+(html|shtml)')
        .pipe(gulp.dest(DST_DIR));
});

/**
 * 编译全部scss
 */
gulp.task('auto-css', function() {
    return gulp.src(SRC_DIR + 'res/scss/**/*.scss', {
            base: SRC_DIR + 'res/scss/'
        })
        .pipe(sourcemaps.init())
        .pipe(sass({
            style: 'expanded'
        }))
        .pipe(autoprefixer({
            browsers: ['> 1%'],
            cascade: false
        }))
        .pipe(gulp.dest(DST_DIR + 'res/css/'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(sourcemaps.write('../../maps/')) // dist/maps/文件夹
        .pipe(gulp.dest(DST_DIR + 'res/css/'))
});

/**
 * 编译全部javascript
 */
gulp.task('auto-js', ['auto-mainjs'], function() {
    return gulp.src([SRC_DIR + '**/*.js', '!' + SRC_DIR + 'res/js/global/*.js'], {
            base: SRC_DIR + 'res/js/'
        })
        .pipe(sourcemaps.init())
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest(DST_DIR + 'res/js/'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify({
            output: {
                ascii_only: true,
            }
        }))
        .pipe(sourcemaps.write('../../maps/')) // dist/maps/文件夹
        .pipe(gulp.dest(DST_DIR + 'res/js/'))
});

/**
 * 编译公共javascript
 */
gulp.task('auto-mainjs', function() {
    return gulp.src(JS_ALL)
        .pipe(sourcemaps.init())
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(DST_DIR + 'res/js/global'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify({
            output: {
                ascii_only: true
            }
        }))
        .pipe(sourcemaps.write('../../../maps/global')) // dist/maps/global
        .pipe(gulp.dest(DST_DIR + 'res/js/global'))
});

/**
 * 单独页面编译
 * folder:文件夹名称
 */
function imgTask(folder) {
    return gulp.task('img-' + folder, function() {
        gulp.src(SRC_DIR + 'res/img/' + folder + '/**/*.{png,jpg,gif,ico}', {
                base: SRC_DIR
            })
            .pipe(imagemin({
                optimizationLevel: 5,
                progressive: true,
                interlaced: true,
            }))
            .pipe(gulp.dest(DST_DIR))
    });
}

function htmlTask(folder) {
    return gulp.task('html-' + folder, function() {
        var htmlAddress;
        if (folder == 'index') {
            htmlAddress = SRC_DIR + '*.{shtml,html}';
        } else {
            htmlAddress = SRC_DIR + folder + '/**/*.{shtml,html}';
        }
        gulp.src(htmlAddress, {
                base: SRC_DIR
            })
            .pipe(gulp.dest(DST_DIR))
    })
}

function cssTask(folder) {
    return gulp.task('css-' + folder, function() {
        gulp.src(SRC_DIR + 'res/scss/' + folder + '/*.scss', {
                base: SRC_DIR + 'res/scss/'
            })
            .pipe(sourcemaps.init())
            .pipe(sass({
                style: 'expanded'
            }))
            .pipe(autoprefixer({
                browsers: ['> 1%'],
                cascade: false
            }))
            .pipe(gulp.dest(DST_DIR + 'res/css/'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(minifycss({
                compatibility: 'ie8'
            }))
            .pipe(sourcemaps.write('../../maps/')) // dist/maps/文件夹
            .pipe(gulp.dest(DST_DIR + 'res/css/'))
    })
}

function jsTask(folder, deps) {
    if (!deps) {
        deps = []
    }
    deps.push(SRC_DIR + 'res/js/' + folder + '/*.js');
    return gulp.task('js-' + folder, function() {
        gulp.src(deps)
            .pipe(sourcemaps.init())
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(concat(folder + 'all.js'))
            .pipe(gulp.dest(DST_DIR + 'res/js/' + folder + '/'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(uglify({
                output: {
                    ascii_only: true,
                }
            }))
            .pipe(sourcemaps.write('../../../maps/' + folder + '/')) // dist/maps/文件夹
            .pipe(gulp.dest(DST_DIR + 'res/js/' + folder + '/'))
    })
}

/**
 * 单独页面监视
 * folder:文件夹名称
 */
function watchTask(folder) {
    return gulp.task('watch-' + folder, function() {
        var htmlAddress;
        if (folder == 'index') {
            htmlAddress = SRC_DIR + '*.{shtml,html}';
        } else {
            htmlAddress = SRC_DIR + folder + '/**/*.{shtml,html}';
        }
        gulp.watch(htmlAddress, ['html-' + folder]);
        gulp.watch(SRC_DIR + 'res/scss/' + folder + '/*.scss', ['css-' + folder]);
        gulp.watch(SRC_DIR + 'res/js/' + folder + '/*.js', ['js-' + folder]);
    })
}

/*
 *[JS.jquery, JS.jqcommon, JS.ajax, JS.common, JS.global, JS.popbox, JS.head, JS.login]
 */
htmlTask('index');
htmlTask('BOM');
cssTask('BOM');
jsTask('index', [JS.jquery, JS.popbox]);
jsTask('BOM', [JS.jquery, JS.popbox, JS.jqcommon]);
watchTask('BOM');

OVER