grunt

npm install -g grunt-cli //全局安装grunt
npm init -y //初始化package.json
npm install grunt --save-dev //在项目中安装grunt
grunt --help //查看更多信息
grunt 安装完毕

新建Gruntfile.js
随便举得例子1：

module.exports= function (grunt) {
    grunt.registerTask('default', function () {
        console.log('aaaaaaaa');
        //grunt.log.writeln('aaaaaaaa');
        //函数中可以传递参数
    })
};

随便举的例子2:
执行多任务

module.exports= function (grunt) {
    grunt.registerTask('a', function (name) {
        grunt.log.writeln('hello'+name);
    });
    grunt.registerTask('b', function () {
        grunt.log.writeln('hello2')
    });
    grunt.registerTask('c', function () {
        grunt.log.writeln('hello3')
    });
    grunt.registerTask('default',['a','b','c']);
};

我们可以初始化一些数据，这些数据可以用到不同的任务里面

module.exports= function (grunt) {
    grunt.initConfig({
        a:{
            english:'hello'
        }
    });
    grunt.registerTask('a', function (name) {
        grunt.log.writeln(grunt.config.get('a.english'));
    });
};

多个任务执行

module.exports= function (grunt) {
    grunt.initConfig({
        a:{
            english:'hello',
            spanlish:'hello2'
        }
    });
    grunt.registerMultiTask('a', function (name) {
        grunt.log.writeln(this.target+':'+this.data);
    });
};

以下是插件的一部分功能
复制文件
npm install grunt-contrib-copy --save-dev

grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.initConfig({
        copy:{
            html:{
                src:'index.html',
                dest:'dist/'
            }
        }
    });

监听文件
npm install grunt-contrib-watch --save-dev

grunt.loadNpmTasks('grunt-contrib-watch');
        watch:{
            html:{
                files:['index.html'],
                tasks:['copy:html']
            }
        }

放到服务器上
npm install grunt-contrib-connect --save-dev

 connect:{
            server:{
               port:8080,
               base:'dist/'
            }
 }

grunt connect:server:keepalive一直保持状态

自动刷新浏览器
npm install grunt-contrib-livereload --save-dev
在connect中添加：livereload:true
在watch中添加：livereload:true

编译sass
npm install grunt-contrib-sass --save-dev

        sass:{
            mysass:{
                src:'css/a.scss',
                dest:'dist/scss/a.css'
            }
        }

编译less
npm install grunt-contrib-less --save-dev

        less:{
            myless:{
                src:'css/b.less',
                dest:'dist/less/b.css'
            }
        }

npm install grunt-contrib-concat --save-dev //安装合并插件

npm install grunt-contrib-uglify --save-dev //安装js压缩插件

js压缩合并

        concat:{
            myconcat:{
                src:'js/*.js',
                dest:'dist/hebing/a.hebing.js'
            }
        },
        uglify:{
            myuglify:{
                src:'dist/hebing/a.hebing.js',
                dest:'dist/yasuohebing/b.min.js'
            }
        }

npm install grunt-contrib-cssmin --save-dev//安装css压缩

npm install grunt-contrib-htmlmin --save-dev//安装html压缩
htmlmin:{
            options:{
                removeComments: true,
                removeCommentsFromCDATA: true,
                collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true
            },
            myminhtml:{
                src:'index.html',
                dest:'dist/html/'
            }
        }

npm install grunt-contrib-imagemin --save-dev//优化img  
imagemin:{
            myimage:{
                expand:true,
                src:'img/*',
                dest:'dist/'
            }
        }

文件头部加一段注释性语言配置banner信息
 options: {      banner: '/*! 注释信息 */'    }