Grunt 与 Gulp 的对比

Gruntfile.js

module.exports = function ( grunt ) {
    'use strict';

    // 项目配置
    grunt.initConfig( {

        clean : {
            main : {
                src : [ 'build' ]
            }
        } ,

        // 精简js
        uglify : {

            base_v2 : {
                src : [
                    'src/common/js/requireConfig.js' ,
                    'src/common/libs/require.js' ,
                    'src/common/js/requireMain.js'
                ] ,
                dest : 'build/common/js/base.js'
            } ,

            dynamic : {
                files : [
                    {
                        expand : true , //启用动态扩展
                        cwd : 'src/' , //批匹配相对lib目录的src来源
                        src : [ '**/*.js' , '!**/base*.js' ] , // 不包括已经处理的base类js
                        dest : 'build/' //目标路径前缀
                    }
                ]
            }
        } ,

        // 精简css
        cssmin : {

            // base.css 文件由好几个组成，把它们合并成一个。应该会遵照数字的顺序来合并的吧
            global_css : {
                src : 'src/common/css/base_*.css' ,
                dest : 'build/common/css/base.css'
            } ,

            dynamic : {
                files : [
                    {
                        expand : true , //启用动态扩展
                        cwd : 'src/' , //批匹配相对lib目录的src来源
                        src : [ '**/*.css' , '!**/global*.css' ] , // 不包括global类文件
                        dest : 'build/' //目标路径前缀
                    }
                ]
            }
        } ,

        // 用于精简html
        htmlmin : {
            dist : {
                options : {
                    removeComments : true ,
                    collapseWhitespace : true
                } ,
                files : [
                    {
                        expand : true ,
                        cwd : 'src/' ,
                        src : '**/*.html' ,
                        dest : 'build/'
                    }
                ]
            }
        } ,

        // 精简png、jpg和gif
        imagemin : {
            dynamic : {
                files : [
                    {
                        expand : true ,
                        cwd : 'src/' ,
                        src : [ '**/*.{png,jpg,gif}' ] ,
                        dest : 'build/'
                    }
                ]
            }
        } ,

        // 复制其它文件
        copy : {
            main : {
                files : [
                    {
                        expand : true ,
                        cwd : 'src/' ,
                        src : [
                            '**/*.*' , '!**/*.{js,css,html,psd,png,jpg,gif}'
                        ] ,
                        dest : 'build/'
                    }
                ]
            }
        }
    } );

    // 加载各种必需的插件
    grunt.loadNpmTasks( 'grunt-contrib-uglify' ); // 精简js
    grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); // 精简css
    grunt.loadNpmTasks( 'grunt-contrib-htmlmin' ); // 精简html
    grunt.loadNpmTasks( 'grunt-contrib-imagemin' ); // 精简图片
    grunt.loadNpmTasks( 'grunt-contrib-copy' ); // 复制文件
    grunt.loadNpmTasks( 'grunt-contrib-clean' ); // 删除文件或文件夹

    grunt.registerTask( 'default' , [
        'clean' , 'uglify' , 'cssmin' , 'htmlmin' , 'imagemin' , 'copy'
    ] );
};

gulpfile.js

// 注意：使用的是 gulp 4.0
var gulp    = require( 'gulp' ) ,
minifyJS    = require( 'gulp-uglify' ) ,
minifyCSS   = require( 'gulp-minify-css' ) ,
minifyImage = require( 'gulp-imagemin' ) ,
minifyHTML  = require( 'gulp-htmlmin' ) ,
changed     = require( 'gulp-changed' ) ,
concat      = require( 'gulp-concat' ) ,
deleteFile  = require( 'del' ) ,

paths       = {
    src : 'src' ,
    dist : 'dist' ,

    baseJsFiles : [
        'src/common/js/requireConfig.js' ,
        'src/common/libs/require.js' ,
        'src/common/js/requireMain.js'
    ] ,

    otherJsFiles : [
        'src/**/*.js' ,
        '!src/common/js/requireConfig.js' ,
        '!src/common/libs/require.js' ,
        '!src/common/js/requireMain.js' ,
        '!src/common/js/base.js' ,
        '!src/static/**/*.js'
    ] ,

    baseCssFiles : 'src/common/css/base_*.css' ,

    otherCssFiles : [ 'src/**/*.css' , '!src/**/base*.css' ] ,

    htmlFiles : 'src/common/**/*.html' ,

    imageFiles : 'src/**/*.{png,jpg,gif}' ,

    copyFiles : [ 'src/**/*' , '!src/**/*.{js,css,html,psd,png,jpg,gif}' ]
};

function clean( cb ) {
    deleteFile( paths.dist , cb );
}

function jsBase() {
    return gulp.src( paths.baseJsFiles )
        .pipe( concat( 'base.js' ) )
        .pipe( minifyJS() )
        .pipe( gulp.dest( paths.dist + '/common/js' ) );
}

function js() {
    return gulp.src( paths.otherJsFiles )
        .pipe( changed( paths.dist ) )
        .pipe( minifyJS() )
        .pipe( gulp.dest( paths.dist ) );
}

function cssBase() {
    return gulp.src( paths.baseCssFiles )
        .pipe( concat( 'base.css' ) )
        .pipe( minifyCSS() )
        .pipe( gulp.dest( paths.dist + '/common/css' ) );
}

function css() {
    return gulp.src( paths.otherCssFiles )
        .pipe( changed( paths.dist ) )
        .pipe( minifyCSS() )
        .pipe( gulp.dest( paths.dist ) );
}

function html() {
    return gulp.src( paths.htmlFiles , { base : 'src' } )
        .pipe( changed( paths.dist ) )
        .pipe( minifyHTML( {
            removeComments : true ,
            collapseWhitespace : true
        } ) )
        .pipe( gulp.dest( paths.dist ) );
}

function image() {
    return gulp.src( paths.imageFiles )
        .pipe( changed( paths.dist ) )
        .pipe( minifyImage() )
        .pipe( gulp.dest( paths.dist ) );
}
function copy() {
    return gulp.src( paths.copyFiles )
        .pipe( changed( paths.dist ) )
        .pipe( gulp.dest( paths.dist ) );
}

// gulp 4.0 支持使用函数名作为命令行的任务名字
gulp.task( clean );

gulp.task( jsBase );

gulp.task( js );

gulp.task( cssBase );

gulp.task( css );

gulp.task( html );

gulp.task( image );

gulp.task( copy );

// 使用 gulp.parallel 能同时进行多个任务，而不是等待上一个任务完成之后，再进行下一个任务
gulp.task( 'default' , gulp.parallel( jsBase , js , cssBase , css , html , image , copy ) );

没必要为css、image等去建立task，因为根本不会去单独使用这个任务，基本都是开发和打包两个任务