grunt基本使用

最新推荐文章于 2024-08-31 08:00:57 发布

原创最新推荐文章于 2024-08-31 08:00:57 发布 · 317 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#npm使用

grunt

npm

$npm init 初始化项目$ npm install 安装

grunt是JavaScript世界项目的构建工具

重点1.package.json不存在时

命令:npm init可自动创建package.json文件

重点2.package.json存在时

直接命令:npm install 或者 npm install –save-dev会自动将package.json中的模块安装到node-modules文件夹下

安装grunt

npm install grunt –save-dev
使用中国节点，淘宝镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装grunt
$ cnpm install grunt –save-dev

安装grunt-cli工具

$ cnpm install grunt-cli -g

grunt-spritesmith 制作精灵图

安装grunt-spritesmith
$ cnpm install grunt-spritesmith –save-dev

 sprite: {
            all: {
                src: ['public/images/*.png', '!public/images/banner.png', '!public/images/bannerPhone.jpg'],
                dest: 'public/images/spritesheet.png',
                destCss: 'public/css/sprites.css'
            }
        }
 ```
### grunt-contrib-cssmin  压缩css
```js
cnpm install grunt-contrib-cssmin --save-dev 
 cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'public/css',
                    src: ['*.css', '!*.min.css'],
                    dest: 'public/css',
                    ext: '.min.css'
                }]
            }
        }




<div class="se-preview-section-delimiter"></div>

grunt-contrib-imagemin 压缩图片

cnpm install grunt-contrib-imagemin –save-dev

imagemin: {
            release: {
                files: [{
                    expand: true,
                    src: ['public/images/spritesheet.png', 'public/images/banner.png', 'public/images/bannerPhone.jpg']
                }],
                options: [{
                    optimizationLevel: 3,
                }]
            }
        },




<div class="se-preview-section-delimiter"></div>

grunt-contrib-htmlmin 压缩html

htmlmin: { // Task 
            dist: { // Target 
                options: { // Target options 
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: { // Dictionary of files 
                    'contact.html': 'index.html'
                }
            },
        }




<div class="se-preview-section-delimiter"></div>

grunt-contrib-uglify 压缩js

uglify: {
            my_target: {
                files: {
                    'public/uglify.min.js': ['public/js/jquery-3.2.1.js']
                }
            }
        }




<div class="se-preview-section-delimiter"></div>

grunt-contrib-concat 链接js或者css

concat: {
            js: {
                file: {
                    'build/js/bundle.js': ['public/js/jquery-3.2.1.js', 'public/js/bootstrap.js']
                }
            },
            css: {
                file: {
                    'build/js/final.min.css': ['public/css/*.min.css']
                }
            }
        }




<div class="se-preview-section-delimiter"></div>

grunt-contrib-jshint 检查代码错误

jshint: ['public/js/jquery-3.2.1.js'],




<div class="se-preview-section-delimiter"></div>

grunt-contrib-less less生成css

less: {
            compile: {
                files: {
                    'public/css/complied.css': 'public/css/*.less'
                }
            }
        }




<div class="se-preview-section-delimiter"></div>

grunt-contrib-watch 监听

watch: {
            less: {
                tasks: ['less:compile'],
                files: ['public/css/*.less']
            }
        }




<div class="se-preview-section-delimiter"></div>

module.exports = function(grunt) {
    grunt.initConfig({
        sprite: {
            all: {
                src: ['public/images/*.png', '!public/images/banner.png', '!public/images/bannerPhone.jpg'],
                dest: 'public/images/spritesheet.png',
                destCss: 'public/css/sprites.css'
            }
        },
        cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'public/css',
                    src: ['*.css', '!*.min.css'],
                    dest: 'public/css',
                    ext: '.min.css'
                }]
            }
        },
        imagemin: {
            release: [{
                expand: true,
                src: ['public/images/spritesheet.png', 'public/images/banner.png', 'public/images/bannerPhone.jpg']
            }],
            option: {
                optimzation: 3
            }
        }

    });
    grunt.loadNpmTasks('grunt-spritesmith');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
}