phpstudy集成环境

 首页 > gulp vs grunt 编译速度

gulp vs grunt 编译速度

grunt任务

用了gulp很久了，但是一直感觉gulp的任务比较卡顿，光标一直闪，卡顿半天，而grunt则比较顺畅。
但是按照gulp官方的宣传，基于nodejs stream流的gulp应该比grunt快才对啊

gulp任务

gulpfile.js

    var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')({
        pattern: ['gulp-*', 'imagemin-pngquant'],
        replaceString: /\bgulp[\-.]/,
        lazy: true,
        camelize: true
    }),
    option = {
        buildPath: "../dist/profile"
    };

//构建目录清理
gulp.task("clean", function (done) {

    return gulp.src(option.buildPath)
        .pipe(plugins.clean({
            read: false,
            force: true
        }));
})

//图片
gulp.task('imgmin', function () {
    return gulp.src("../img/*")

        //.pipe(plugins.cache(plugins.imagemin({
        //    optimizationLevel: 7, //类型：Number  默认：3  取值范围：0-7（优化等级）
        //    progressive: true,//类型：Boolean 默认：false 无损压缩jpg图片
        //    interlaced: true,//类型：Boolean 默认：false 隔行扫描gif进行渲染
        //    multipass: true,//类型：Boolean 默认：false 多次优化svg直到完全优化
        //    svgoPlugins: [{removeViewBox: false}]//不要移除svg的viewbox属性
        //    //use: [plugins.imageminPngquant()]//可以压缩70% //使用pngquant深度压缩png图片的imagemin插件
        //}))
        //.on('data', function (data) {
        //    console.log(data.relative);
        //})
        .pipe(gulp.dest(option.buildPath + '/img/'));
});


//js文件压缩
gulp.task('jsmin', function () {
    return gulp.src(["../js/**/*.js", '!../js/libs/*.js'])
        .pipe(plugins.uglify())
        .pipe(gulp.dest(option.buildPath + "/js/"))
});

//需要合并和压缩的文件
gulp.task('concat', function () {
    return gulp.src(['../js/libs/angular.min.js', '../js/libs/*.js', '!../js/libs/bridge*.js'])
        .pipe(plugins.concat('libs.min.js'))
        .pipe(plugins.uglify())
        .pipe(plugins.addSrc('../js/libs/bridge*.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(option.buildPath + "/js/libs/"))
});

gulp.task("processhtml", function () {
    var date = new Date().getTime();
    return gulp.src('../main.html')
        .pipe(plugins.replace(/_VERSION_/gi, date))
        .pipe(plugins.processhtml())
        .pipe(plugins.htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(option.buildPath + '/'))
})

//压缩css
gulp.task("cssmin", function () {
    return gulp.src("../style/*.css")
        .pipe(plugins.minifyCss())
        .pipe(gulp.dest(option.buildPath + '/style'))
})
//压缩html文件
gulp.task("htmlmin", function () {
    return gulp.src('../views/*.html')
        .pipe(plugins.htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(option.buildPath + '/views'))
})

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function () {
    return gulp.start('jsmin', 'cssmin', 'processhtml', "htmlmin", 'imgmin', 'concat');
});

gruntfile

   //2016/01/13 By Reeoo Shen

'use strict';

module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        paths: { //自定义变量
            tmp: '.tmp', //临时目录
            build: '../dist/', //清除目录
            dist: '../dist/profile/',
            getReplacedStr: function () {
                var time = new Date(),
                    year = time.getFullYear(),
                    month = time.getMonth() + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1,
                    day = time.getDate() < 10 ? "0" + time.getDate() : time.getDate(),
                    hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours(),
                    minute = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes(),
                    second = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
                return year + '-' + month + '-' + day + '-' + hour + '-' + minute + '-' + second;
            }
        },
        //清除目录
        clean: {
            clear: ['<%= paths.tmp %>', '<%= paths.dist %>'],
            options: {
                force: true
            }
        },
        //css文件压缩
        cssmin: {
            options: {
                //美化代码
                beautify: {
                    //中文ascii化，非常有用！防止中文乱码的神配置
                    ascii_only: true
                }
            },
            minify: {
                expand: true, //如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
                cwd: '../style/', //需要处理的文件（input）所在的目录。
                src: ['*.css'], //表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
                dest: '<%= paths.dist %>/style/', //表示处理后的文件名或所在目录。
                ext: '.css' //表示处理后的文件后缀名。
            }
        },
        //文件拷贝
        copy: {
            image: {
                files: [
                    {
                        expand: true,
                        cwd: '../img/',
                        src: ['../img/**/**'],
                        dest: '<%= paths.dist %>/img/'
                    }
        ]
            }
        }, //!../js/libs/*.js
        //js压缩
        uglify: {
            jsmin: {
                //当'minify'任务运行时Grunt将自动在"lib/"下搜索"**/*.js", 然后构建适当的src-dest文件映射，因此你不需要在文件添加或者移除时更新Gruntfile
                files: [{
                    expand: true, //启用动态扩展
                    cwd: '../js/', //批匹配相对lib目录的src来源
                    src: ['../js/**/**/*.js', '!../js/libs/*.js'],
                    dest: '<%= paths.dist %>/js/' //目标路径前缀
          }]
            },
            bridge: {
                files: [{
                    expand: true, //启用动态扩展
                    cwd: '../js/libs/', //批匹配相对lib目录的src来源
                    src: 'bridge*.js',
                    dest: '<%= paths.dist %>/js/libs/' //目标路径前缀
          }]
            },
            single: {
                src: ['<%= paths.dist %>/js/libs/libs.min.js'],
                dest: '<%= paths.dist %>/js/libs/libs.min.js',
            }
        },
        //js合并
        concat: {
            options: {
                separator: ';',
            },
            dist: {
                src: ['../js/libs/angular.min.js', '../js/libs/*.js', '!../js/libs/bridge*.js'],
                dest: '<%= paths.dist %>/js/libs/libs.min.js',
            },
        },
        //html压缩
        htmlmin: { // Task
            dist: { // Target
                options: { // Target options
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: [{
                    expand: true, //启用动态扩展
                    cwd: '../views/', //批匹配相对lib目录的src来源
                    src: '*.html',
                    dest: '<%= paths.dist %>/views/' //目标路径前缀
        }],
            },
            single: {
                options: { // Target options
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: {
                    '<%= paths.dist %>/main.html': '<%= paths.dist %>/main.html'
                }
            }
        },
        //引用替换
        processhtml: {
            files: {
                src: '<%= paths.dist %>/main.html',
                dest: '<%= paths.dist %>/main.html'
            }
        },
        //字符串替换
        replace: {
            dist: {
                options: {
                    patterns: [
                        {
                            match: /_VERSION_/gi,
                            replacement: '<%= paths.getReplacedStr() %>'
            }
          ]
                },
                files: [
                    {
                        src: ['../main.html'],
                        dest: '<%= paths.dist %>main.html'
                    }
        ]
            }
        },
        //生成压缩包
        zip: {
            'using-delate': {
                src: ['<%= paths.dist %>**/**/*'],
                dest: '<%= paths.build %><%= pkg.name %><%= paths.getReplacedStr()%>.zip',
                compression: 'DEFLATE' //压缩
            },
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean'); //清除目录和临时文件
    grunt.loadNpmTasks('grunt-contrib-copy'); //拷贝文件
    grunt.loadNpmTasks('grunt-contrib-jshint'); //检查js语法错误
    grunt.loadNpmTasks('grunt-contrib-concat'); //合并文件
    grunt.loadNpmTasks('grunt-contrib-uglify'); //压缩代码
    grunt.loadNpmTasks('grunt-contrib-cssmin'); //css压缩
    grunt.loadNpmTasks('grunt-contrib-htmlmin'); //压缩html
    grunt.loadNpmTasks('grunt-contrib-compress'); //压缩html
    grunt.loadNpmTasks('grunt-processhtml'); //处理html文件
    grunt.loadNpmTasks('grunt-replace'); //处理html文件
    grunt.loadNpmTasks('grunt-zip'); //生成zip包
    //执行各模块的方法
    grunt.registerTask('default', ['clean', 'cssmin', 'concat', 'uglify', 'copy', 'replace', 'processhtml', 'htmlmin', 'zip']);

    //warning:
    //生成zip包的路径不正确，会多出3级，暂时没找到解决方法,试了N个插件，没解决
};

上面的是两个file的对比，请忽略两个执行的任务不一样多，因为就算改成一样多，还是gulp比较卡顿，请问大神，这是什么原因，是不是我gulp用的姿势不对？请指教

怎么感觉gulp就是卡在concat这个任务？而你的grunt恰好没这个任务。

没有人知道么？？？

//需要合并和压缩的文件
gulp.task('concat', function () {
    return gulp.src(['../js/libs/angular.min.js', '../js/libs/*.js', '!../js/libs/bridge*.js'])
        .pipe(plugins.concat('libs.min.js'))
        .pipe(plugins.uglify()) //这里已经uglify了lib.min.js了
        .pipe(plugins.addSrc('../js/libs/bridge*.js')) 
         //add src只是把一个文件流添加到原有的文件流里，实际上相当于mergeStream([vfs.src('../js/libs/bridge*.js'),plugins.concat('libs.min.js')])
        .pipe(plugins.uglify()) //这里又uglify了lib.min.js和'../js/libs/bridge*.js'
        .pipe(gulp.dest(option.buildPath + "/js/libs/"))
});

改成

//需要合并和压缩的文件
gulp.task('concat', function () {
    return gulp.src(['../js/libs/angular.min.js', '../js/libs/*.js', '!../js/libs/bridge*.js'])
        .pipe(plugins.concat('libs.min.js'))
        .pipe(plugins.addSrc('../js/libs/bridge*.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(option.buildPath + "/js/libs/"))
});

没任何意义的比较。完全是喜欢萝卜还是喜欢白菜的问题。喜欢维护配置文件就会去用 Grunt，喜欢写任务处理函数的就会去用 Gulp。

请参见我之前的回答 http://.com/q/1010000003951849/a-1020000003952258，
另外任何比较都是建立在外部条件相同情况下，首先确保相同的处理流程，并且插件背后用的库是相同的。

绝对是gulp快，因为是基于流的。

【热门文章】
【热门文章】