【33】grunt打包工具的一些js跟命令

这里有些效果不好展示 请大家移步到 鑫大大小屋

/**
 * Created by Administrator on 2015/5/14.
 */
module.exports=function(grunt){
    grunt.initConfig({
        /**
         * css精灵
         * 安装 npm install grunt --save-dev
         * 安装 npm install grunt-spritesmith --save-dev
         * 运行 grunt sprite
         */
        sprite:{
            devMode:{
                src:['public/img/111_32.png','public/img/111_35.png'],  // 图片路径
                dest:'public/img/aaa.png', // 生成图片路径
                destCss:'public/css/aaa.css' // 生成css路径
            }
        },
        /**
         * imagemin 压缩图片
         * 安装 npm install grunt-contrib-imagemin --save-dev
         * 运行 grunt imagemin
         */
        imagemin:{
            release:{
                files:[{
                    expand:true,
                    src:['public/img/*.*'] // 压缩图的路径
                }],
                options:{
                    optimizationLevel:8    // 压缩级别
                }
            }
        },
        /**
         * cssmin 压缩css
         * 安装 npm install grunt-contrib-cssmin --save-dev
         * 运行 grunt cssmin
         */
        cssmin:{
            target:{
                files:[{
                    expand:true,
                    cwd:'public/css', // 压缩css的路径
                    src:['*.css','!*.min.css'], // 所有的.css文件除了后面带min的
                    dest:'public/css',   // 输出的目录
                    ext:'.min.css' // 压缩完加一个.min
                }]
            }
        },
        /**
         * jshint 校验js文件
         * 安装 npm install grunt-contrib-jshint --save-dev
         * 运行 grunt jshint
         */
        jshint:['Gruntfile.js'],
        /**
         * concat 合并JS,CSS
         * 安装 npm install grunt-contrib-concat --save-dev
         * 运行 grunt concat
         */
        concat:{
            js:{
                files:{
                    'build/js/bundle.min.js':['public/js/jquery-1.11.3.min.js','public/js/bootstrap.min.js']
                }
            },
            css:{
                files:{
                    'build/css/final.min.css':['!public/css/*.css','public/css/*.min.css']
                }
            }
        },
        /**
         * uglify 精简JS
         * 安装 npm install grunt-contrib-uglify --save-dev
         * 运行 grunt uglify
         */
        uglify:{
            min:{
                files:{
                    'uglify.min.js':'build/js/bundle.min.js'
                }
            }
        },
        /**
         * less 编译less文件
         * 安装 npm install grunt-contrib-less --save-dev
         * 运行 grunt less
         */
        less:{
            compile:{
                files:{
                    'public/css/compiled.css':'public/css/*.less'
                }
            }
        },
        /**
         * 安装 npm install grunt-contrib-watch --save-dev
         * watch文件监听
         * 运行 grunt watch
         */
        watch:{
            less:{
                tasks:['less:compile'],
                files:['public/css/*.less']
            },
            concat:{
                tasks:['concat:js'],
                files:['public/js/*.js']
            },
            uglify:{
                tasks:['uglify:min'],
                files:['build/js/bundle.js']
            }
        }

    });
    grunt.loadNpmTasks('grunt-spritesmith');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['jshint']);
    grunt.registerTask('js','concat and uglify js assets',['concat:jss','uglify:min']);
    grunt.registerTask('build','build a whole project',['sprite','less','cssmin','uglify','concat','imagemin']);
};
发布了42 篇原创文章 · 获赞 57 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/qq_36911154/article/details/78269352