Grunt入门教程(自动任务运行器)(3)


上面代码将src子目录(只包含它下面的第一层文件和子目录),拷贝到dest子目录下面(即dest/src目录)。如果要更准确控制拷贝行为,比如只拷贝文件、不拷贝目录、不保持目录结构,可以写成下面这样:


copy: { main: { expand: true, cwd: ‘src/‘, src: ‘*‘, dest: ‘dest/‘, flatten: true, filter: ‘isFile', }, }, grunt-contrib-watch

watch模块用来在后台运行,监听指定事件,然后自动运行指定的任务。


watch: { scripts: { files: ‘/*.js', tasks: ‘jshint', options: { livereload: true, }, }, css: { files: ‘/.sass', tasks: [‘sass'], options: { livereload: true, }, }, },


设置好上面的代码,打开另一个进程,运行grunt watch。此后,任何的js代码变动,文件保存后就会自动运行jshint任务;任何sass文件变动,文件保存后就会自动运行sass任务。

需要注意的是,这两个任务的options参数之中,都设置了livereload,表示任务运行结束后,自动在浏览器中重载(reload)。这需要在浏览器中安装livereload插件。安装后,livereload的默认端口为localhost:35729,但是也可以用livereload: 1337的形式重设端口(localhost:1337)。

### 其他模块

下面是另外一些有用的模块。

(1)grunt-contrib-clean

该模块用于删除文件或目录。


clean: { build: { src: [“path/to/dir/one”, “path/to/dir/two”] } }


(2)grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。


autoprefixer: { build: { expand: true, cwd: ‘build', src: [ ‘**/.css' ], dest: ‘build' } },


(3)grunt-contrib-connect

该模块用于在本机运行一个Web Server。


connect: { server: { options: { port: 4000, base: ‘build', hostname: ‘‘ } } }


connect模块会随着grunt运行结束而结束,为了使它一直处于运行状态,可以把它放在watch模块之前运行。因为watch模块需要手动中止,所以connect模块也就会一直运行。

(4)grunt-htmlhint

该模块用于检查HTML语法。


htmlhint: { build: { options: { ‘tag-pair': true, ‘tagname-lowercase': true, ‘attr-lowercase': true, ‘attr-value-double-quotes': true, ‘spec-char-escape': true, ‘id-unique': true, ‘head-script-disabled': true, }, src: [‘index.html'] } }


上面代码用于检查index.html文件:HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

(5)grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。


sass: { build: { options: { style: ‘compressed' }, files: { ‘build/css/master.css': ‘assets/sass/master.scss' } } }


上面代码指定输出文件为build/css/master.css,输入文件为assets/sass/master.scss。

(6)grunt-markdown

该模块用于将markdown文档转为HTML文档。


markdown: { all: { files: [ { expand: true, src: ‘.md', dest: ‘docs/html/‘, ext: ‘.html' } ], options: { template: ‘templates/index.html', } } },


上面代码指定将md后缀名的文件,转为docs/html/目录下的html文件。template属性指定转换时采用的模板,模板样式如下。


<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div id=”main” class=”container”> <%=content%> </div> </body> </html>


{src: ‘foo/th.js'}grunt-contrib-uglify {src: ‘foo/{a,b}.js'} {src: [‘foo/a.js', ‘foo/b.js']}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggpsy.html