grunt简记

grunt和gulp都是前端自动化的工具，grunt更成熟，插件社区全、大；gulp比较年轻，性能更好，更简单容易。具体使用哪种可根据实际项目组来决定。

创建任务

grunt默认执行的是default文件

module.exports = function(grunt) {
    grunt.registerTask('default',function(){
        console.log('Hello Grunt');
    })
}

 

在执行他的时候，需要给参数赋值，比如在命令行输入：grunt greet:marymei

module.exports = function(grunt) {
    grunt.registerTask('greet',function(name){
        console.log('Hello' +name);
    })
}

 

处理错误,遇到错误warn默认就不继续执行了，但是可以在命令行设置grunt greet:n --force来强制执行
但是如果是fatal,那么即使使用了grunt greet:n --force他也是不向下执行的

module.exports = function(grunt) {
    grunt.registerTask('greet',function(name){
        if(name.length < 2) {
            grunt.warn('名字太短了~');
        }
        grunt.log.writeln('Hello' +name);
    })
}

 

链接多个任务：

module.exports = function(grunt) {
    grunt.registerTask('greet-1',function(){
        grunt.log.writeln('Hello');
    });
    grunt.registerTask('greet-2',function(){
        grunt.log.writeln('Hola');
    });
    grunt.registerTask('greet-3',function(){
        grunt.log.writeln('您好');
    });
    grunt.registerTask('greentAll',['greet-1','greet-2','greet-3']);
};

 

初始化：

module.exports = function(grunt) {
    grunt.initConfig({
        greet: {
            english: 'Hello'
        }
    });
    grunt.registerTask('greet',funtion(){
        grunt.log.writeln(grunt.config.get('greet.english'));
    });
};

 

多任务：

module.exports = function(grunt) {
    grunt.initConfig({
        greet: {
            english: 'Hello'，
            spanish:'Hola',
            chinese:'您好'
        }
    });
    grunt.registerMultiTask('greet',funtion(){
        grunt.log.writeln(this.target + ':' + this.data);
        
    });
};

 

文件与目录
创建目录

module.exports = function(grunt) {
    grunt.registerTask('createFolders',function(){
        grunt.file.mkdir('dist/stylesheets');
    });
};

tree -I node_modules 命令可以查看文件目录

删除目录：

module.exports = function(grunt) {
    grunt.registerTask('createFolders',function(){
        grunt.file.mkdir('dist/stylesheets');
    });
    grunt.registerTask('clean',function(){
        grunt.file.delete('dist');
    });
};

 

显示版本

module.exports = function(grunt) {
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json');
    });
    grunt.registerTask('copyright',function(){
        var content = grunt.tamplate.process('<%= pkg.name%>这个项目是由<%= pkg.author %>创建的，现在的版本<%= pkg.version %>');
        grunt.file.write('copyright.txt', content);
    });
};

复制文件：
 module.exports = function(grunt){ 2 grunt.loadNpmTasks('grunt-contrib-copy'); 3 } 

配置要复制的文件：

module.exports = function(grunt){
    //加载复制文件的插件
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.initConfig({
        copy: {
            html: {
                src: 'index.html',
                dest: 'dist/'
            },
            style: {
                src: 'stylesheets/*.css',
                dest: 'dist/'
            },
            js: {
                src:'javascript/**/*.js'
                dest:'dist/'
            }
        }
    })
};

 

监听文件变化的插件：
先安装如下命令
插件：npm install grunt-contrib-watch --save-dev

module.exports = function(grunt){
    //加载复制文件的插件
    grunt.loadNpmTasks('grunt-contrib-copy');
    //加载监听文件变化，文件发生变化执行指定的任务
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.initConfig({
        watch: {
            html:{
                files: ['index.html'],
                tasks:['copy.html']
            }
        },
        copy: {
            html: {
                src: 'index.html',
                dest: 'dist/'
            },
            style: {
                src: 'stylesheets/*.css',
                dest: 'dist/'
            },
            js: {
                src:'javascript/**/*.js',
                dest:'dist/'
            }
        }
    })
};

 

插件
创建服务器：grunt-contrib-connect
配置服务器
实时刷新：livereload
编译sass：grunt-contrib-sass
编译less：grunt-contrib-less
合并文件：grunt-contrib-concat
选项：options
最小化js：grunt-contrib-uglify
最小化css：grunt-contrib-cssmin
最小化图像：grunt-contrib-imagemin

......

安装插件的命令 sudo npm install xxxx --save-dev


配置服务器:

module.exports = function(grunt){
    //加载复制文件的插件
    grunt.loadNpmTasks('grunt-contrib-copy');
    //加载监听文件变化，文件发生变化执行指定的任务
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.initConfig({
        connect:{
            server:{
                options: {
                    port:8000,
                    base:'dist'
                }
            }
        },
        watch: {
            html:{
                files: ['index.html'],
                tasks:['copy.html']
            }
        },
        copy: {
            html: {
                src: 'index.html',
                dest: 'dist/'
            },
            style: {
                src: 'stylesheets/*.css',
                dest: 'dist/'
            },
            js: {
                src:'javascript/**/*.js',
                dest:'dist/'
            }
        }
    })
};