Grunt 配置任务_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Grunt 配置任务
|0|0|暂无简介
W3Cschool（）最大的技术知...|
总评分0.0|
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩6页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢Grunt 配置里的 src 和 dest 具体对应什么意思?
比如下边的配置, 因为 Grunt 支持 src dest 的写法, 于是我用了:
module.exports = (grunt) -&
grunt.initConfig
cwd: 'long/long/path/coffee/'
src: ['**']
dest: 'long/long/path/js/'
ext: '.js'
filter: 'isFile'
cwd: 'long/long/path/stylus/'
src: ['**']
dest: 'long/long/path/css/'
结果运行 Grunt 报错了, 其他的具体配置我省略了:
&& Source file "a.styl" not found.
&& Source file "b.styl" not found.
&& Source file "c.styl" not found.
&& Source file "d.styl" not found.
&& Source file "e.styl" not found.
&& Source file "f.styl" not found.
具体的文件 a.styl 等, 在 long/long/path/stylus/ 是验证了存在的, 只能推测是处理相对路径时 Grunt 转成了其他路径
主要是 src dest pwd 在 Grunt 里, 他们是全局生效的配置语法吗?
我的场景里, 希望代码从 x 路径批量编译代码到 y 路径, 应该怎样写配置?
后来发现原因是 expand 参数没写.. 参数没有正确展开
2014年 7月26日
(1,166 威望)
请输入验证码:
[captcha placeholder]
或 后不会被要求输入验证码。
如果我的答案被选中或被评论，请通过一下邮箱通知我:
隐私保护: 您的邮箱仅用于发送系统通知。
请输入验证码:
&&&& 或 后不会被要求输入验证码。
提一个问题:
2016年 2月16日
(932 威望)
2015年 7月25日
(1,306 威望)
2016年 1月22日
(877 威望)
2016年 3月23日
(889 威望)
2016年 8月4日
(1,313 威望)
欢迎访问随意问技术百科，为了给您提供更好的服务，请及时反馈您的意见。Grunt安装使用入门教程-js教程-网页制作-壹聚教程网Grunt安装使用入门教程
今天没事进入到了Grunt中文社区了学习了了下，下面我就把我学习到的Grunt的一些参考文章整理出与各位同学分享希望此例子对大家会有所帮助。
说实话，最好的教程还是官方的。目前我使用的版本是v0.4.1。安装grunt需要先安装node.js。现在node的安装也很方便，下载下来直接安装完成之后，在cmd下测试node --version和npm --version是否正确显示即可。
之后需要借助npm来安装grunt-cli，注意，不是安装grunt。想要在cmd中使用grunt命令，需要npm install -g grunt-cli。完成后测试grunt --version看是否正确显示grunt-cli版本。
这样，就完成了grunt的安装。
在项目中使用
首先创建一个项目目录，由于grunt是node环境下运行，需要使用npm进行管理。所以项目必须要有一个package.json文件，里面最重要的是写明白devDependencies依赖关系。这里有一个例子（用于编译less）可以使用：
& &name&: &ProjectName&,
& &version&: &0.1.0&,
& &devDependencies&: {
&&& &grunt&: &*&,
&&& &grunt-contrib-less&: &*&,
&&& &grunt-contrib-watch&: &*&
有了package.json文件之后，我们就可以使用npm install来建立项目了。但是此时，还不能使用grunt命令，因为还差一个Gruntfile.js或者Gruntfile.coffee的文件。这个文件作用是grunt如何工作。继续那个例子（编译less）的Gruntfile.js如下：
module.exports = function (grunt) {
grunt.initConfig({
&&& less: {
&&&&&&& compile: {
&&&&&&&&&&& files: {
&&&&&&&&&&&&&&& 'css/test.css': 'css/test.less'
&&&&&&&&&&& }
&&&&&&& },
&&&&&&& yuicompress: {
&&&&&&&&&&& files: {
&&&&&&&&&&&&&&& 'css/test-min.css': 'css/test.css'
&&&&&&&&&&& },
&&&&&&&&&&& options: {
&&&&&&&&&&&&&&& yuicompress: true
&&&&&&&&&&& }
&&& watch: {
&&&&&&& scripts: {
&&&&&&&&&&& files: ['css/*.less'],
&&&&&&&&&&& tasks: ['less']
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less', 'watch']);
这样，在项目路径下，就可以执行grunt来完成对css路径下less文件的实时编译了。
我觉得入门的时候，最烦人的就是package.json和Gruntfile.js的创建。所以grunt有一个grunt-init的工具，项目地址。通过npm install -g grunt-init安装之后，还需要创建~/.grunt-init目录。在此目录中通过git clone来加载模版。模版加载完成之后，就可以通过grunt-init TEMPLATE来创建了。
另一个小技巧，在项目目录下，先通过npm init创建默认的package.json文件，然后npm install。以后需要用到哪个模块的时候（比如grunt），使用npm install &module& --save-dev会自动把依赖关系写入到package.json中。--save-dev会自动维护package.json文件。
这一节，我主要学习下Gruntfile.js怎么去写。顺便搭建一个上节课的用于实时编译coffee, less，并且打包压缩js,css文件的grunt。
说一下这一次的项目结构：
├── src
│&& ├──index.html
│&& ├── scripts
│&& └── styles
└── utils
&&& ├── node_modules
&&& │&& ├── grunt
&&& │&& └── grunt-contrib-xxxx
&&& ├── Gruntfile.js
&&& └── package.jsonsrc是我开发的项目的目录，utils是grunt的目录。涉及到的package.json如下：
& &name&: &utils&,
& &version&: &0.1.0&,
& &devDependencies&: {
&&& &grunt&: &*&,
&&& &grunt-contrib-less&: &*&,
&&& &grunt-contrib-coffee&: &*&,
&&& &grunt-contrib-concat&: &*&,
&&& &grunt-contrib-uglify&: &*&,
&&& &grunt-contrib-watch&: &*&
Gruntfile.js 结构
典型的模块写法：
module.exports = function(grunt) {
&// config here
grunt.initConfig里面写什么呢，第一个，写pkg : grunt.file.readJSON('package.json'),使得之后可以通过&% %&获取package里的内容。
接下来，就是任务的定义了。具体什么任务，要看加载了什么任务包。用什么任务包，去plugin查查吧。我这里用的都是grunt-contrib-*就是官方提供的。
比如grunt-contrib-less任务包，命令可以如下：
&&& compile: {
&&&&&&& options: {},
&&&&&&& files: {
&&&&&&&&&&& '../src/styles/result.css': '../src/styles/source.less',
&&&&&&&&&&& // '../src/styles/another.css': ['../src/styles/sources/*.less', '../src/styles/more/*.less']
&&& glob_to_multiple: {
&&&&&&& expand: true,
&&&&&&& flatten: true,
&&&&&&& cwd: '../src/styles/',
&&&&&&& src: ['*.less'],
&&&&&&& dest: '../src/styles/',
&&&&&&& ext: '.css'
说明一下，如果不需要子命令。那么直接在less:{}去写files等参数，调用也是直接grunt less调用。但是,如果需要子命令，比如为了开发，发布时候做的不同处理。需要在less:{}中再命名一个子命令subTaskName: {}，这里的subTaskName是随意取的。使用的时候，通过grunt less:subTaskName使用。
加载任务包
搜索plugin查找你需要使用的任务包，通过npm install &module& --save-dev来安装。-save-dev参数自动维护package.json文件。
安装modules之后，在Gruntfile.js中，使用grunt.loadNpmTasks('grunt-contrib-less');来加载。
通过grunt.registerTask('default', ['less']);来命名，这里defalut表示grunt。其实就是指grunt, grunt default和grunt less命令一直。你可以修改defalut,然后配置不同的任务。
这里我给出一个我自己写的Gruntfile.js文件。欢迎大家fork。
module.exports = function(grunt) {
&&& grunt.initConfig({
&&&&&&& pkg : grunt.file.readJSON('package.json'),
&&&&&&& coffee: {
&&&&&&&&&&& compile: {
&&&&&&&&&&&&&&& // 选项
&&&&&&&&&&&&&&& options: {},
&&&&&&&&&&&&&&& // 指定文件编译
&&&&&&&&&&&&&&& files: {
&&&&&&&&&&&&&&&&&&& // 1:1 compile
&&&&&&&&&&&&&&&&&&& '../src/scripts/result.js': '../src/scripts/source.coffee',
&&&&&&&&&&&&&&&&&&& // compile and concat into single file
&&&&&&&&&&&&&&&&&&& // '../src/scripts/another.js': ['../src/scripts/sources/*.coffee', '../src/scripts/more/*.coffee']
&&&&&&&&&&&&&&& }
&&&&&&&&&&& },
&&&&&&&&&&& // 实时编译，1:1
&&&&&&&&&&& glob_to_multiple: {
&&&&&&&&&&&&&&& expand: true,
&&&&&&&&&&&&&&& flatten: true,
&&&&&&&&&&&&&&& cwd: '../src/scripts/',
&&&&&&&&&&&&&&& src: ['*.coffee'],
&&&&&&&&&&&&&&& dest: '../src/scripts/',
&&&&&&&&&&&&&&& ext: '.js'
&&&&&&&&&&&&&&& // 后面还可以继续写cwd~ext内容
&&&&&&&&&&& }
&&&&&&& },
&&&&&&& less: {
&&&&&&&&&&& compile: {
&&&&&&&&&&&&&&& options: {},
&&&&&&&&&&&&&&& files: {
&&&&&&&&&&&&&&&&&&& '../src/styles/result.css': '../src/styles/source.less',
&&&&&&&&&&&&&&&&&&& // '../src/styles/another.css': ['../src/styles/sources/*.less', '../src/styles/more/*.less']
&&&&&&&&&&&&&&& }
&&&&&&&&&&& },
&&&&&&&&&&& glob_to_multiple: {
&&&&&&&&&&&&&&& expand: true,
&&&&&&&&&&&&&&& flatten: true,
&&&&&&&&&&&&&&& cwd: '../src/styles/',
&&&&&&&&&&&&&&& src: ['*.less'],
&&&&&&&&&&&&&&& dest: '../src/styles/',
&&&&&&&&&&&&&&& ext: '.css'
&&&&&&&&&&& }
&&&&&&& },
&&&&&&& // 合并文件
&&&&&&& concat : {
&&&&&&&&&&& css : {
&&&&&&&&&&&&&&& files: {
&&&&&&&&&&&&&&&&&&& // des: src对应关系
&&&&&&&&&&&&&&&&&&& '../src/dest/result.css': ['../src/styles/**/*.css']
&&&&&&&&&&&&&&& }
&&&&&&&&&&& },
&&&&&&&&&&& js : {
&&&&&&&&&&&&&&& files: {
&&&&&&&&&&&&&&&&&&& '../src/dest/result.js': ['../src/scripts/**/*.js']
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&& },
&&&&&&& // 压缩JS
&&&&&&& uglify : {
&&&&&&&&&&& options : {
&&&&&&&&&&&&&&& banner : '/*! &%= pkg.name %& &%= grunt.template.today(&yyyy-mm-dd&) %& */ '
&&&&&&&&&&& },
&&&&&&&&&&& build : {
&&&&&&&&&&&&&&& src : '../src/dest/*.js',
&&&&&&&&&&&&&&& dest : '../src/dest/result.min.js'
&&&&&&&&&&& }
&&&&&&& },
&&&&&&& watch: {
&&&&&&&&&&& // 写任务名称，然后写监控文件，使用的任务,
&&&&&&&&&&& // 多个文件夹监听，要追个写出到files数组中
&&&&&&&&&&& coffee: {
&&&&&&&&&&&&&&& files: ['../src/scripts/*.coffee'],
&&&&&&&&&&&&&&& tasks: ['coffee:glob_to_multiple']
&&&&&&&&&&& },
&&&&&&&&&&& less: {
&&&&&&&&&&&&&&& files: ['../src/styles/*.less'],
&&&&&&&&&&&&&&& tasks: ['less:glob_to_multiple']
&&&&&&&&&&& }
&&& grunt.loadNpmTasks('grunt-contrib-less');
&&& grunt.loadNpmTasks('grunt-contrib-coffee');
&&& grunt.loadNpmTasks('grunt-contrib-concat');
&&& grunt.loadNpmTasks('grunt-contrib-uglify');
&&& grunt.loadNpmTasks('grunt-contrib-watch');
&&& grunt.registerTask('default', ['coffee:glob_to_multiple', 'less:glob_to_multiple']);
项目中常用的Grunt任务：
npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-requirejs --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-htmlmin --save-dev
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-jasmine --save-dev
npm install grunt-template-jasmine-requirejs --save-dev
这里有几件事情要注意：第一你要先安装Grunt(这是Grunt CLI的一部分)。我们已经讨论过了，这意味着我们可以安装我们需要的不同的Grunt版本(根据项目需求)。
另一件事情是使用--save-dev标记，这意味着我们的package.json文件会自动更新，包括依赖我们刚刚安装的。
因为这些依赖荐是安装在本地，你会发现一个新的node_module文件夹出现在您的项目中。这个目录包含上述所有依赖项目/我们刚刚安装的任务。
我建议您创建一个.gitignore文件(您正在使用Git版本控制系统，对吗？)，忽略这个文件夹(你不想最终将这些模块提交到你的版本库让其他用户下载，最好让他们按上面的指示安装自己需要的模块)。
上一页： &&&&&下一页：相关内容}