zoukankan      html  css  js  c++  java
  • grunt项目构建

    最近想把项目里添加grunt,说白了就是前端自动化管理,具体配置如下:

    用到以下几个部件:

    grunt-contrib-cssmin

    grunt-contrib-uglify

    grunt-contrib-jshint

    grunt-contrib-imagemin

    grunt-contrib-concat

    这几个应该是最常用的几个部件,用于我们页面需要后台部署,所以没有用html压缩。

    过几天会把文件合并部件加上,减少http请求。再找一下有没有图片合并的部件,百度的F.I.S就整合了图片合并的部件。

    目录结构: 

    干货。。。

    Gruntfile.js

    module.exports = function (grunt) {
    
        // 构建任务配置
        grunt.initConfig({
    
            //读取package.json的内容,形成个json数据
            pkg: grunt.file.readJSON('package.json'),
    
            //javascript检查纠错
            jshint: {
                all: ['Gruntfile.js', 'js/allChose.js', 'js/header.js', 'js/index.js', 'register.js', 'table.js']
            },
    
            //压缩js
            uglify: {
                //文件头部输出信息
                options: {
                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
    '
                },
                my_target: {
                    files: [
                        {
                            expand: true,
                            //相对路径
                            cwd: 'js/',
                            src: '*.js',
                            dest: 'dest/js'
                        }
                    ]
                }
            },
    
            //文件合并
            concat: {
                option: {
                    separator: ';'
                },
                dist: {
                    src: ['dest/js/allChose.js', 'dest/js/header.js', 'dest/js/index.js', 'dest/js/register.js', 'dest/js/table.js'],
                    dest: 'dest/lib.min.js'
                }
            },
    
            //压缩css
            cssmin: {
                //文件头部输出信息
                options: {
                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
    ',
                    //美化代码
                    beautify: {
                        //中文ascii化,非常有用!防止中文乱码的神配置
                        ascii_only: true
                    }
                },
                my_target: {
                    files: [
                        {
                            expand: true,
                            //相对路径
                            cwd: 'style/',
                            src: '*.css',
                            dest: 'dest/css'
                        }
                    ]
                }
            },
    
            //图片优化
            imagemin: {
                dist: {
                    files: [
                        {
                            expand: true,
                            //相对路径
                            cwd: 'style/image',
                            src: ['*.{gif,jpg,png}'],
                            dest: 'dest/img'
    
                        }
                    ]
                }
            }
        });
    
        // 加载指定插件任务
        grunt.loadNpmTasks('grunt-contrib-jshint');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-imagemin');
    
        // 默认执行的任务
        grunt.registerTask('default', ['jshint', 'uglify', 'concat', 'cssmin', 'imagemin']);
    
    };

    package.json

    可以用命令行:npm init 自动生成

  • 相关阅读:
    常用的设计模式汇总
    设计模式总结
    C# WinForm文章收集
    SQL Server 2012/2016/2017 新增函数
    SQL Server 日期函数大全
    【BZOJ3622】已经没有什么好害怕的了
    【SDOI2009】Bill的挑战
    【HDU4507】恨7不成妻
    BSOJ 2423 -- 【PA2014】Final Zarowki
    BSOJ 4591 -- 【JLOI2015】城池攻占
  • 原文地址:https://www.cnblogs.com/qzsonline/p/4059983.html
Copyright © 2011-2022 走看看