grunt使用

grunt例子：https://github.com/Aquarius1993/gruntDemo

1、前提是已经有npm（可以通过安装nodejs实现）

2、 npm update -g npm 更新npm

3、安装 CLI  npm isntall -g grunt-cli

4、 编写GRuntfile.js

 

usemin:

Example: The following block（html文件里学院这样写）

<!-- build:js scripts/site.js -->',
<script src="foo.js"></script>',
<script src="bar.js"></script>',
<script src="baz.js"></script>',
<!-- endbuild -->'

　　

is parsed as, and given to createConfig as:

var block = {
  type: 'js',
  dest: 'scripts/site.js',
  src: [
    'foo.js',
    'bar.js',
    'baz.js'
  ],
  raw: [
    '    <!-- build:js scripts/site.js -->',
    '    <script src="foo.js"></script>',
    '    <script src="bar.js"></script>',
    '    <script src="baz.js"></script>',
    '    <!-- endbuild -->'
  ]
};

　　

 

Gruntfile.js里写这个：

usemin: {
  html: 'index.html',
  options: {
    blockReplacements: {
      less: function (block) {
          return '<link rel="stylesheet" href="' + block.dest + '">';
      }
    }
  }
}

　　

 

例子/*

* @Author: liheyao

* @Date:   2016-06-08 14:49:25

* @Last Modified by:   liheyao

* @Last Modified time: 2016-06-13 18:04:52

*/

 

module.exports = function(grunt) {
 // Project configuration.
  var timestamp=new Date().getTime();
  grunt.initConfig({
    clean: {
      all: 'bulid/'
    },
    copy: {
      image: {
        files: [
          {
            expand: true,
            cwd: 'src',
            src: ['*.html'],
            dest: 'bulid/'
          },
          {
            expand: true,
            cwd: 'src',
            src: ['img/*.{png,jpg,jpeg,gif,ico}'],
            dest: 'bulid/'
          }
        ]
      }
    },
    // 合并js
    concat: {
      options: {
        separator: ';',
        stripBanners: true
      },
      prod: {
        files: [
          {
            src: ["src/js/test.js","src/js/test1.js"],
            dest: "bulid/js/test-concat.js"
          },
          {
            src: ["src/js/testtest1.js","src/js/testtest2.js","src/js/testtesttest3.js"],
            dest: "bulid/js/testtest-concat.js"
          }
        ]
      }
    },
    // 压缩js
    uglify: {

      dev:{       //名字随意
            files: {
              'bulid/js/test-concat.min.js':['<%= concat.prod.files[0].dest %>'],
              'bulid/js/testtest-concat.min.js': ['<%= concat.prod.files[1].dest %>'],
              'bulid/js/auto-focus.min.js': ["src/js/auto-focus.js"],
              'bulid/js/index.min.js': ["src/js/index.js"],
              'bulid/js/conditional.min.js': ["src/js/conditional.js"],
            }
          }
    },
    jshint: {//js验证
      all: ['Gruntfile.js']
    },
    sass: {//默认不压缩   可通过style改变
      dist: {
        options: {
          style: 'compressed'//style: nested  嵌套缩进的css代码。是默认值  expanded  没有缩进 扩展的css代码  compact  简洁格式的css代码   compressed  压缩后的css代码
        },
        files: [{
          expand: true,
          cwd: 'src/sass/',
          src: ['*.scss','*.css'],
          dest: 'bulid/css',
          ext: '.css'
        }]
      }
    },
    htmlmin: {
      options: {
        removeComments: true,
        removeCommentsFromCDATA: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeOptionalTags: true
      },
      html: {
        files: [{
          expand: true,
          cwd: 'bulid/',
          src: ['*.html'],
          dest: 'bulid/'
        }]
      }
    },
    imagemin: {
      prod: {
        options: {
        optimizationLevel: 7,
        pngquant: true
      },
      files: [
        {
          expand: true,
          cwd: 'bulid/',
          src: ['img/*.{png,jpg,jpeg,gif,webp,svg}'],
          dest: 'bulid/'
        }
      ]
      }
    },
    // 处理html中css、js 引入合并问题
    usemin: {
      html: ['bulid/*.html'],
      options: {
        blockReplacements: {
          js: function (block) {
            return '<script type="text/javascript" src="' + block.dest + '?t=' + timestamp + '"></script>';
          },
          css: function (block) {
            return '<link rel="stylesheet" type="text/css" href="' + block.dest + '?t=' + timestamp + '"/>';
          }
        }
      }
    },
    watch: {
      sass: {
        files: ['src/sass/*.scss'],
        tasks:'sass'
      },
      uglify:{
        files: ['src/js/*.js'],
        tasks: 'uglify'
      },
      htmlmin: {
        files: ['src/*.html'],
        tasks: 'htmlmin'
      },
      livereload: {
        options: {
          livereload: true
        },
        files:'bulid/**/*'
      }
    }
  });
  // 加载包含“uglify”任务的插件

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-copy');
  // 默认被执行的任务列表
  grunt.registerTask('default',['clean','copy','concat','uglify','jshint','sass','usemin','htmlmin','imagemin']);//
};