grunt安装与配置

安装 CLI

npm install -g grunt-cli//全局安装

npm init //初始化package.json

npm init   命令会创建一个基本的package.json文件。

npm install grunt --save-dev

npm install grunt-contrib-jshint --save-dev

　　

.......//安装你需要的依赖

安装完以后在package.json的同级创建一个Gruntfile.js配置文件

配置如下

 module.exports = function(grunt) {
 var timestamp = new Date().getTime();
 grunt.initConfig({
 pkg: grunt.file.readJSON('package.json'),
 //文件合并
 concat: {
 options: {
 //定义一个用于插入合并输出文件之间的字符
 seperator: ';'
 },
 build: {
 //将要合并的文件
 // src:['src/**/*.js'],
 //合并后的js文件的存放位置
 // dest:['build/<%= pkg.name %>.js']
 files: { // Dictionary of files
 'dist/css/main.css': ['src/**/*.css', '!src/**/*.min.css'],
 'dist/js/index.js': 'src/**/*.js'
 //'src/sass/all.scss':'src/sass/*.scss'
 }
 },
 concatsass: {
 files: {
 'src/sass/all.scss': 'src/sass/*.scss'
 }
 }
 },
 //压缩js
 uglify: {
 options: {
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 },
 /*dist:{
 files:{
 'dist/<%= pkg.name %>.min.js':['<%= concat.dist.dest %>']
 }
 }*/
 build: {
 src: 'dist/js/index.js',
 dest: 'dist/js/index.min.js'
 }
 },
 //压缩html
 htmlmin: {

 options: { // Target options
 removeComments: true,
 removeCommentsFromCDATA: true
 // collapseWhitespace: true,
 // minifyCSS:true
 // collapseBooleanAttributes: true,
 // removeAttributeQuotes: true,
 // removeRedundantAttributes: true,
 // useShortDoctype: true,
 // removeEmptyAttributes: true,
 // removeOptionalTags: true
 },
 html: {
 files: [{ // Dictionary of files
 expand: true,
 cwd: 'dist',
 src: ['**/*.html'],
 dest: 'dist' //'destination':'source'
 }]
 }
 },
 //js的语法检测
 jshint: {
 files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js', '!src/**/*.min.js'],
 options: {
 //这里是覆盖JSHint默认配置的选项
 globals: {
 jQuery: true,
 console: true,
 module: true,
 document: true
 }
 }
 },
 //css压缩
 cssmin: {
 options: {
 //shorthandCompactiong:false,
 roundingPercision: -1 //这个属性应该是将样式相同的都提取出来
 },
 build: {
 files: {
 // 'dist/css/main.css': 'dist/css/main.css'
 }
 }
 },
 //
 // qunit:{
 // files:['test/**/*.html']
 // },
 //监听事件
 watch: {
 build: {
 files: ['<%= jshint.files %>', 'src/**/*.css'],
 tasks: ['jshint', 'qunit'],
 options: { spawn: false }
 }

 },
 //处理html中css、js 引入合并问题
 usemin: {
 html: 'dist/**/*.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 + '"/>';
 }
 }
 }
 },
 //

 //copy
 copy: {
 src: {
 files: [
 { expand: true, cwd: 'src', src: ['**/*.html'], dest: 'dist' }, //设置的相对于哪个路径找文件就是cwd的值，这里我写的html在test文件里，所以设置成test;所有的源文件路径，都是相对于cwd
 //dist 目标路径
 { expand: true, cwd: 'src/css', src: ['*.min.css'], dest: 'dist/css' },
 { expand: true, cwd: 'src/js', src: ['*.min.js'], dest: 'dist/js' }
 ]
 },
 image: {
 files: [
 { expand: true, cwd: 'src', src: ['images/**/*.{png,jpg,jpeg,gif}'], dest: 'dist' }
 ]
 },
 robots: {
 files: [
 { expand: true, cwd: 'src', src: ['robots.txt'], dest: 'dist' }
 ]
 }
 },
 //图片压缩
 imagemin: {
 static: { // Target
 options: { // Target options
 optimizationLevel: 3,
 svgoPlugins: [{ removeViewBox: false }],
 use: []
 },
 files: { // Dictionary of files
 // 'dist/img.png': 'src/img.png', // 'destination': 'source'
 // 'dist/img.jpg': 'src/img.jpg',
 // 'dist/img.gif': 'src/img.gif'
 }
 },
 dynamic: { // Another target
 files: [{
 expand: true, // Enable dynamic expansion
 cwd: 'src/', // Src matches are relative to this path
 src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
 dest: 'dist' // Destination path prefix
 }]
 }
 },
 //requirejs 打包
 requirejs: {
 options: {
 baseUrl: '',
 paths: {
 "$": 'src/zepto',
 "_": 'src/underscore',
 "B": 'src/backbone'
 },
 include: ['$', '_', 'B'],

 out: 'dist/libs.js' //会将include里面的文件打包为out对应的文件，paths的本身意义不大，就是用于配置include里面的指向
 }
 },
 //sprite 雪碧图 //grunt-spritesmith
 sprite: {
 options: {
 //追加时间戳，默认不追加
 spritestamp: true
 },
 //image-set 示例
 all: {
 src: 'src/images/*.jpg',
 dest: 'dist/images/spritesheet.png',
 destCss: 'dist/css/sprites.css'
 }
 },
 sass: {
 dist: {
 // src:'src/**/*.scss',
 // dest:'dist/css/compiled.css'
 options: { // Target options
 style: 'expanded'
 },
 files: {
 'src/css/all.css': 'src/sass/all.scss'
 }
 }

 },
 //清理文件
 clean: {
 html: ['dist/**/*.html'],
 sass: ['src/sass/all.scss'],
 css: ['dist/css/*.css'],
 js: ['dist/js/*.js'],
 images: ['dist/images/**/*.{png,jpg,jpeg,gif}']
 },
 //合并 html
 includereplace: {
 dist: {
 files: [
 { src: ['**/*.html'], dest: 'dist', expand: true, cwd: 'src' }
 ]
 }
 }

 });

 //加载包含"uglify" 任务的插件
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-copy');
 grunt.loadNpmTasks('grunt-contrib-jshint');
 //grunt.loadNpmTasks('grunt-contrib-qunit');
 grunt.loadNpmTasks('grunt-contrib-htmlmin');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-contrib-imagemin');
 grunt.loadNpmTasks('grunt-usemin');
 grunt.loadNpmTasks('grunt-contrib-requirejs');
 grunt.loadNpmTasks('grunt-spritesmith');
 grunt.loadNpmTasks('grunt-contrib-sass');
 grunt.loadNpmTasks('grunt-contrib-clean');
 grunt.loadNpmTasks('grunt-include-replace');

 //默认被执行的任务列表
 //grunt.registerTask('dev',['clean','copy','concat','sass','uglify','copy','usemin','htmlmin']);
 grunt.registerTask('dev', ['clean', 'jshint', 'copy', 'concat:concatsass', 'sass', 'concat:build', 'uglify', 'includereplace', 'usemin']);
 grunt.registerTask('dist', ['clean', 'jshint', 'copy', 'concat:concatsass', 'sass', 'concat:build', 'uglify', 'cssmin', 'includereplace', 'usemin']);
 };