今天继续学习grunt

昨天学会了如何搭建一个grunt项目 并且可以顺利的跑起来，哈哈…但是还是得先学会如何去配置grunt才是干货。

就用 copy 来举例吧

首先我要保证grunt-contrib-copy 在自己的本地开发环境里有

其次 看代码

copy:{
        dist_html:{
            files:[{
                expand:true,
                cwd:'<%= config.app %>',
                dest:'<%= config.dist %>',
                src:[
                '{,*/}*.html',
                '{,*/}*.js'
                ]
            }]
        }
    }

是不是跟昨天的一点不一样啊，是的这里加入了配置，现在逐个说明

extend 是一个boolean值 如果设置为true 就表示（*）占位符要扩展为具体的名字

cwd 就是你决定去处理的文件目录

dest 就是处理后目标文件的目录

src 就是表示需要处理的文件 例子中就只处理了html和js文件

最后追加几个例子

clean:{
        dist:{
            src:['<%= config.dist%>/js/**/*.js','<%= config.dist %>/**/*.html']
        }
    }

此处 需要注意 /*/ 这个是模糊匹配的形式 这儿全清啦…

uglify:{
        dist:{
            options:{
                mangle:false,
                preserveComments:'all'
            },
            files:{
                '<%= config.dist %>/js/util.min.js':['<%= config.dist %>/js/index.js','<%= config.dist %>/js/util.js']
            }
        }
    }

此处 是我们常用的压缩合并文件 接着来

htmlmin:{
        dist:{
            options:{
                collapseBooleanAttributes: true,
                collapseWhitespace: true,
                conservativeCollapse: true,
                removeAttributeQuotes: true,
                removeCommentsFromCDATA: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true,
                removeRedundantAttributes: false,
                useShortDoctype: true
            },
            files:[{
                expand:true,
                cwd:'<%= config.dist%>',
                src:'{,*/}*.html',
                dest:'<%= config.dist %>'
            }]
        }
    }

这也是我们经常在部署的时候需要做的一步 压缩html 这里的options是用来设置我们压缩时的一些规则的，你可以按字面意思来理解…

呵呵…今天就干了这么多 把配置熟悉了一下下…

下面是我的package.json配置文件：

{
  "name": "grunt-empty",
  "version": "1.0.0",
  "description": "leart grunt by the empty project",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "grunt",
    "empty",
    "merge"
  ],
  "author": "chuanyan",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-copy": "^0.8.2",
    "grunt-contrib-htmlmin": "^0.6.0",
    "grunt-contrib-uglify": "^0.11.0",
    "load-grunt-tasks": "^3.4.0",
    "time-grunt": "^1.3.0"
  }
}

这个相对比较简单 不复杂 很适合搞搞练习啦...哈哈...加油

最后贴一个问题，在执行grunt uglify的时候报:
Destination(_s/js/script.js) not written because src files were empty.
网上也有很多说明为啥出现这种错误，我告诉你，可能是你的配置有错了，请仔细检查 一开始都喜欢写成 src dest的形式来练习.后面换了一种方式就ok啦，我的做法是用了它:
'<%= config.dist %>/js/util.min.js':['<%= config.dist %>/js/util.js']

最后

以上就是可爱毛衣为你收集整理的grunt.initConfig配置学习今天继续学习grunt的全部内容，希望文章能够帮你解决grunt.initConfig配置学习今天继续学习grunt所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。