grunt构建

 构建工具

        构建工具是对 JS、CSS、HTML、LESS、IMG 等资源文件进行合并压缩构建到最后实现自动化构建项目。
    最流行的三种自动化构建工具: Grunt, Gulp, webpack。
    简化项目构建，自动完成构建。

   

    grunt自动化构建工具，一个基于nodeJs的命令行工具；
    任务运行器, 有丰富的插件；
            常用功能:
                合并文件(js/css)
                压缩文件(js/css)
                语法检查(js)
                less/sass预编译处理

 链接地址：

        中文：http://www.gruntjs.net/(中文官网)
        教程：http://www.cnblogs.com/wangfupeng1988/p/4561993.html(教程)

项目结构：

        |- build
        |- src
            |- js
            |- css
        |- index.html
        |- Gruntfile.js
        |- package.json

 grunt配置文件流程：Gruntfile.js

1、初始化插件配置（初始化）
2、加载插件任务（加载）
3、注册构建任务（注册）

module.exports = function(grunt){
grunt.initConfig({
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', []);
};

 * 常用的插件:

        * grunt-contrib-clean——清除文件(打包处理生成的)
        * grunt-contrib-concat——合并多个文件的代码到一个文件中
        * grunt-contrib-uglify——压缩js文件
        * grunt-contrib-jshint——javascript语法错误检查；
        * grunt-contrib-cssmin——压缩/合并css文件
        * grunt-contrib-htmlmin——压缩html文件
        * grunt-contrib-imagemin——压缩图片文件(无损)
        * grunt-contrib-copy——复制文件、文件夹
        * grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

 完整配置（Gruntfile.js）：

module.exports = function(grunt) {
    grunt.initConfig({
        concat: {
            options: {
                separator: ';',
            },
            dist: {
                src: ['src/js/*.js'],
                dest: 'dist/js/built.js',
            },
        },
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            target: {
                files: {
                    'dist/js/built.min.js': ['dist/js/built.js']
                }
            }
        },
        babel: {
            options: {
                sourceMap: true,
                presets: ['@babel/preset-env'] // '@babel/preset-env'
            },
            dist: {
                files: {
                    'dist/js/built.js': 'src/js/*.js'
                }
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            build: ['Gruntfile.js', 'src/js/*.js']
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'dist/css/built.min.css': ['src/css/*.css']
                }
            }
        },
        watch: {
            scripts: {
                files: ['src/js/*.js', 'src/css/*.css'],
                tasks: ['concat', 'jshint', 'uglify', 'cssmin'],
                options: { spawn: false }
            }
        }
    });
    // js合并
    grunt.loadNpmTasks('grunt-contrib-concat');
    // js压缩
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // babel es转换
    grunt.loadNpmTasks('grunt-babel');
    // 语法检查
    grunt.loadNpmTasks('grunt-contrib-jshint');
    // css合并压缩
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 监听
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 注册构建任务
    grunt.registerTask('default', ['concat', 'uglify', 'babel', 'jshint', 'cssmin']);
    grunt.registerTask('myWatch', ['default', 'watch']);
};

.jshintrc jshint配置文件：

{
"curly": true,
"eqeqeq": true,
"eqnull": true,
"expr": true,
"immed": true,
"newcap": true,
"noempty": true,
"noarg": true,
"regexp": true,
"browser": true,
"devel": true,
"node": true,
"boss": false,
"esversion": 6,
"undef": true,
"asi": false,
"predef": ["define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}

最后

以上就是无私水杯为你收集整理的grunt构建的全部内容，希望文章能够帮你解决grunt构建所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。