Grunt 实战

专题截图:(注：这个截图没啥意义)

项目截图:

目录讲解：

app/        //开发目录;

　　c/     //开发编译完成css文件夹;

　　i/     //开发img文件夹;

　　j/     //开发js文件夹;

　  s/     //开发sass文件夹;

dist/      //正是发布的目录;

　　.../  //对应app 正式发布文件;

Gruntfile.js  //grunt 的配置文件;

node_modules  //node模块文件;

package.json  //模块信息;

package.json 文件展示：

{
  "name": "grunt-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.6",
    "grunt": "^1.0.1",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.2",
    "grunt-contrib-imagemin": "^1.0.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-csscomb": "^3.1.1",
    "grunt-curl": "^2.2.0",
    "grunt-open": "^0.2.3",
    "grunt-zip": "^0.17.1",
    "load-grunt-tasks": "^3.5.2",
    "time-grunt": "^1.4.0"
  }
}

 Gruntfile.js 文件展示：

module.exports = function( grunt ){

    'use strict';

    var config = {             //配置路径;
            app  : 'app',
            dist : 'dist'
        };

    grunt.initConfig({
        config : config,    //导入路径;

        copy : {            //复制;
            dist : {
                files: [
                    {
                        expand: true,
                        src: '<%= config.app %>/**.html',
                        dest: '<%= config.dist %>/',
                        flatten: true
                    }
                ]
            }
        },
        clean : {            //清楚;
            dist : {
                src  : [ '<%= config.dist %>/**/*' ]
            }
        },
        watch: {            //监听;
            files: 'app/s/**/*.scss',
            tasks: ['css','js']
        },
        sass: {                //sass;
            dev: {
                files: [{
                  expand: true,
                  cwd: '<%= config.app %>/s/',
                  src: ['*.scss'],
                  dest: '<%= config.app %>/c/',
                  ext: '.css'
                }]
            }
        },
        autoprefixer: {     //添加css3前缀;
            options: {
              browsers: ["> 5%",'Firefox < 20','ie 6']
            },
            css: {
                src: [
                  '<%= config.app %>/c/**/*.css'  //将哪个 CSS 文件中的 CSS 属性添加私有前缀
                ]
            }
        },
        csscomb: {             //格式化css;
            dev: {
                expand: true,
                cwd: '<%= config.app %>/c/',
                src: ['*.css'],
                dest: '<%= config.app %>/c/',
                ext: '.css'
            }
        },
        cssmin: {            
          dist: {            //压缩css;
            files: [{
              expand: true,
              cwd: '<%= config.app %>/c/',
              src: ['*.css'],
              dest: '<%= config.dist %>/c/',
              ext: '.css'
            }]
          }
        },
        imagemin:{             //压缩img;        
            dist: {                          
              options: {                       
                optimizationLevel: 5         //定义 PNG 图片优化水平
              },
              files: [{
                expand: true,                   
                cwd: 'app/i',                    
                src: ['**/*.{png,jpg,gif}'],    
                dest: 'dist/i'                   
              }]
            }
        },
        jshint: {              //检测js格式;    
            all: ['Gruntfile.js', '<%= config.app %>/j/**/*.js']
        },
        uglify: {              //压缩js;    
            dist: {
              files: [{
                expand: true,                   
                cwd: '<%= config.app %>/j',                    
                src: ['**/*.js'],    
                dest: '<%= config.dist %>/j'                   
              }]
            }
        },
        browserSync: {          //浏览器同步免刷新;    
            dev: {
                bsFiles: {
                    src : [
                        '<%= config.app %>/c/*.css',
                        '<%= config.app %>/j/*.js',
                        '<%= config.app %>/i/*.img',
                        '<%= config.app %>/index.html'
                    ]
                },
                options: {
                    watchTask: true,
                    server: './<%= config.app %>'
                }
            }
        },
        open : {             //打开页面;
            all: {
                path : '<%= config.dist %>/index.html'
              }
        },    
        zip: {                //压缩发布文件夹;            
          './time-gruntcachet.zip': ['<%= config.dist %>/**']
        }

    });

    require('load-grunt-tasks')(grunt);    //加载所有grunt插件;
    require('time-grunt')(grunt);        //计算grunt运行时间;

    // 定义默认任务
    grunt.registerTask('default', ['browserSync', 'watch']);
    // 定义css任务;
    grunt.registerTask('css', ['sass','autoprefixer','csscomb']);
    // 定义压缩img任务;
    grunt.registerTask('img', ['imagemin']);
    // 定义检测js任务;
    grunt.registerTask('js', ['jshint']);
    // 定义压缩js任务;
    grunt.registerTask('jsmin', ['jshint','uglify']);
    // 定义压缩js任务;
    grunt.registerTask('dist', ['clean','copy','cssmin','jsmin','img','open']);
    
};

使用步骤:

先决条件安装node.js

1、在 cmd 输入框 建立package.json文件信息　　

$ npm init 

信息基本基本回车就行;

2、在cmd 全局安装grunt-cli

$ npm install -g grunt-cli  

3、在cmd 安装grunt插件

$ npm install grunt browser-sync grunt-autoprefixer 
grunt-browser-sync grunt-contrib-clean grunt-contrib-copy 
grunt-contrib-cssmin grunt-contrib-imagemin 
grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify 
grunt-contrib-watch grunt-csscomb grunt-curl grunt-open 
grunt-zip load-grunt-tasks time-grunt  --save-dev

整个项目要用到的grunt插件就安装完成了

4、编写完Gruntfile.js,在cmd 启动实时刷新浏览器

$ grunt

5、开发完成之后 发布到正是文件夹

$ grunt dist

6、最后压缩打包发给后端;

$ grunt zip

也就是：

后记：

这是我16年上半年做的专题；

不过现在感觉用grunt 就跟手机还在使诺基亚的感觉一样。。。。

参考资料:

Grunt  :   http://www.gruntjs.net/

Materliu  ：  http://www.imooc.com/learn/30