grunt簡記

grunt和gulp都是前端自動化的工具，grunt更成熟，插件社區全、大；gulp比較年輕，性能更好，更簡單容易。具體使用哪一種可根據實際項目組來決定。

建立任務

grunt默認執行的是default文件

1 module.exports = function(grunt) {
2     grunt.registerTask('default',function(){
3         console.log('Hello Grunt');
4     })
5 }

 

在執行他的時候，須要給參數賦值，好比在命令行輸入：grunt greet:marymei

1 module.exports = function(grunt) {
2     grunt.registerTask('greet',function(name){
3         console.log('Hello' +name);
4     })
5 }

 

處理錯誤,遇到錯誤warn默認就不繼續執行了，可是能夠在命令行設置grunt greet:n --force來強制執行
可是若是是fatal,那麼即便使用了grunt greet:n --force他也是不向下執行的

1 module.exports = function(grunt) {
2     grunt.registerTask('greet',function(name){
3         if(name.length < 2) {
4             grunt.warn('名字過短了~');
5         }
6         grunt.log.writeln('Hello' +name);
7     })
8 }

 

連接多個任務：

 1 module.exports = function(grunt) {
 2     grunt.registerTask('greet-1',function(){
 3         grunt.log.writeln('Hello');
 4     });
 5     grunt.registerTask('greet-2',function(){
 6         grunt.log.writeln('Hola');
 7     });
 8     grunt.registerTask('greet-3',function(){
 9         grunt.log.writeln('您好');
10     });
11     grunt.registerTask('greentAll',['greet-1','greet-2','greet-3']);
12 };

 

初始化：

 1 module.exports = function(grunt) {
 2     grunt.initConfig({
 3         greet: {
 4             english: 'Hello'
 5         }
 6     });
 7     grunt.registerTask('greet',funtion(){
 8         grunt.log.writeln(grunt.config.get('greet.english'));
 9     });
10 };

 

多任務：

 1 module.exports = function(grunt) {
 2     grunt.initConfig({
 3         greet: {
 4             english: 'Hello'，
 5             spanish:'Hola',
 6             chinese:'您好'
 7         }
 8     });
 9     grunt.registerMultiTask('greet',funtion(){
10         grunt.log.writeln(this.target + ':' + this.data);
11         
12     });
13 };

 

文件與目錄
建立目錄

1 module.exports = function(grunt) {
2     grunt.registerTask('createFolders',function(){
3         grunt.file.mkdir('dist/stylesheets');
4     });
5 };

tree -I node_modules 命令能夠查看文件目錄

刪除目錄：

1 module.exports = function(grunt) {
2     grunt.registerTask('createFolders',function(){
3         grunt.file.mkdir('dist/stylesheets');
4     });
5     grunt.registerTask('clean',function(){
6         grunt.file.delete('dist');
7     });
8 };

 

顯示版本

1 module.exports = function(grunt) {
2     grunt.initConfig({
3         pkg:grunt.file.readJSON('package.json');
4     });
5     grunt.registerTask('copyright',function(){
6         var content = grunt.tamplate.process('<%= pkg.name%>這個項目是由<%= pkg.author %>建立的，如今的版本<%= pkg.version %>');
7         grunt.file.write('copyright.txt', content);
8     });
9 };

複製文件：
  1 module.exports = function(grunt){ 2 grunt.loadNpmTasks('grunt-contrib-copy'); 3 } 

配置要複製的文件：

 1 module.exports = function(grunt){
 2     //加載複製文件的插件
 3     grunt.loadNpmTasks('grunt-contrib-copy');
 4     grunt.initConfig({
 5         copy: {
 6             html: {
 7                 src: 'index.html',
 8                 dest: 'dist/'
 9             },
10             style: {
11                 src: 'stylesheets/*.css',
12                 dest: 'dist/'
13             },
14             js: {
15                 src:'javascript/**/*.js'
16                 dest:'dist/'
17             }
18         }
19     })
20 };

 

監聽文件變化的插件：
先安裝以下命令
插件：npm install grunt-contrib-watch --save-dev

 1 module.exports = function(grunt){
 2     //加載複製文件的插件
 3     grunt.loadNpmTasks('grunt-contrib-copy');
 4     //加載監聽文件變化，文件發生變化執行指定的任務
 5     grunt.loadNpmTasks('grunt-contrib-watch');
 6     grunt.initConfig({
 7         watch: {
 8             html:{
 9                 files: ['index.html'],
10                 tasks:['copy.html']
11             }
12         },
13         copy: {
14             html: {
15                 src: 'index.html',
16                 dest: 'dist/'
17             },
18             style: {
19                 src: 'stylesheets/*.css',
20                 dest: 'dist/'
21             },
22             js: {
23                 src:'javascript/**/*.js',
24                 dest:'dist/'
25             }
26         }
27     })
28 };

 

插件
建立服務器：grunt-contrib-connect
配置服務器
實時刷新：livereload
編譯sass：grunt-contrib-sass
編譯less：grunt-contrib-less
合併文件：grunt-contrib-concat
選項：options
最小化js：grunt-contrib-uglify
最小化css：grunt-contrib-cssmin
最小化圖像：grunt-contrib-imagemin

......

安裝插件的命令 sudo npm install xxxx --save-dev


配置服務器:

 1 module.exports = function(grunt){
 2     //加載複製文件的插件
 3     grunt.loadNpmTasks('grunt-contrib-copy');
 4     //加載監聽文件變化，文件發生變化執行指定的任務
 5     grunt.loadNpmTasks('grunt-contrib-watch');
 6     grunt.loadNpmTasks('grunt-contrib-connect');
 7     grunt.initConfig({
 8         connect:{
 9             server:{
10                 options: {
11                     port:8000,
12                     base:'dist'
13                 }
14             }
15         },
16         watch: {
17             html:{
18                 files: ['index.html'],
19                 tasks:['copy.html']
20             }
21         },
22         copy: {
23             html: {
24                 src: 'index.html',
25                 dest: 'dist/'
26             },
27             style: {
28                 src: 'stylesheets/*.css',
29                 dest: 'dist/'
30             },
31             js: {
32                 src:'javascript/**/*.js',
33                 dest:'dist/'
34             }
35         }
36     })
37 };