정적 파일 압축 및 버전 제어 패키징에 대한 Grunt의 자세한 설명-JS 튜토리얼-php.cn

이 기사에서는 주로 Grunt의 정적 파일 압축 및 버전 제어 패키징에 대한 예를 제공합니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

이야기하기 전에 일반적인 단계에 대해 이야기해 보겠습니다. nodejs 설치 -> 전역적으로 grunt 설치 -> 프로젝트에서 grunt 및 grunt 플러그인 설치 -> > 작업 실행

1. Node 설치하기

Nodejs를 설치해야 합니다. 설치되지 않은 경우Portal

설치가 성공적으로 완료되었는지 확인하세요. 이렇게

npm을 더 빠른 Taobao의 cnpm으로 대체하는 것이 좋습니다.

설치 명령:

npm install cnpm -g -registry=https://registry.npm.taobao.org

2 설치 명령:

cnpm install grunt -g

프로젝트 생성 package.json 프로젝트 루트 디렉터리에 package.json 파일을 생성합니다. 파일 내용은 다음과 같습니다

4. 프로젝트 설치 grunt 및 grunt 플러그인

우리에게 필요한 플러그인

플러그인 이름grun t-contrib-클린 빈 파일 및 폴더 https://github.com/gruntjs/grunt-contrib-cleangrunt-contrib-copy파일 및 폴더 복사https://github.com/gruntjs/ grunt-contrib-copygrunt-contrib-concat파일 연결 및 병합(사용되지 않음)https://github.com/gruntjs/grunt-contrib-concatgrunt-contrib-cssmin (CSS 파일) 압축https://github.com/gruntjs/grunt-contrib-cssmingrunt-contrib-uglify(JS 파일) 압축https://github.com/ gruntjs/grunt-contrib- uglifygrunt-filerev파일 콘텐츠 해시(MD5)(버전 번호 제어)https://github.com/yeoman/grunt-filerevgrunt-usemin파일 참조 수정https://github.com/yeoman/grunt-useminload-grunt-tasksoad-grunt-taskshttps://github.com/sindresorhus/load-grunt -작업

프로젝트 폴더를 열고 경로 표시줄에 cmd를 입력하고 Enter를 누릅니다

Enter를 누른 후의 인터페이스

명령줄 창을 연 후 설치 명령을 입력합니다.

cnpm install grunt grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks --save-dev

5 .Configuring Gruntfile.js (이것이 요점, 요점, 요점입니다. 중요한 것은 세 번이나 말합니다.)

구성을 먼저 게시하고 나중에 천천히 설명하겠습니다

module.exports = function (grunt) {
 require(&#39;load-grunt-tasks&#39;)(grunt);

 var path = {
  src : &#39;test&#39;,
  dest : &#39;dist&#39;,
 }

 grunt.initConfig({
  path : path,
  clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : [&#39;<%= path.dest %>/&#39;]
     }
    ]
   }
  },
  filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : [&#39;<%= path.dest %>/**&#39;, 
      &#39;!<%= path.dest %>/page/*.html&#39;,//html文件不加版本号
      &#39;!<%= path.dest %>/**/*.{png,jpg,jpeg}&#39;]//图片 不需要加版本号
     }
    ]
   }
  },
  useminPrepare : {//声明concat、cssmin、uglify
   build : {
    files : [{     
      src : &#39;<%= path.src %>/page/*.html&#39;
     }
    ],
    
   }
  },
  usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   }
  },
  copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;**/*.*&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
  cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;css/*.css&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.css，匹配src下面所有css文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
  uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;js/*.js&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.js，匹配src下面所有js文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
 });
 grunt.registerTask(&#39;default&#39;, [&#39;clean:beforebuild&#39;, &#39;copy&#39;, &#39;cssmin&#39;, &#39;uglify&#39;,&#39;filerev&#39;, &#39;usemin&#39;]);
};

로그인 후 복사

우리는 항상 거기에 있었습니다. 이것저것 설치해 봤는데, 이렇게 설치된 것들을 어떻게 사용하시나요?

먼저 Grunt 시작하기를 학습하여 플러그인 사용 방법을 알아봅니다. 이것은 공식 웹사이트의 예입니다.

pkg는 package.json을 읽어 생성된 json 개체입니다.

uglify는 grunt-contrib-uglify에 의해 지정된 작업 이름입니다. 각 플러그인에는 해당 githubgrunt.loadNpmTasks('grunt-contrib-uglify'에서 볼 수 있는 해당

작업 이름

이 있습니다. ) ; 문자 그대로의 의미에서 볼 수 있듯이 /는 "uglify" 작업을 제공하는 플러그인을 로드합니다.

grunt.registerTask('default', ['uglify']); 별칭 작업을 등록합니다. 이 별칭 작업은 작업 목록에 해당합니다.

grunt 별칭을 전달할 때 이는 실제로 실행 목록 그 안에 있는 작업을 순서대로 실행해 보세요

이러한 기본 정보는 공식 홈페이지를 통해 확인하실 수 있습니다.

정적 파일을 패키징하고 압축해야 하며, 정적 파일을 참조하는 모든 html 또는 css의 파일 이름을 수정해야 합니다. 우리가 어떻게 하는지 보세요.

1단계: 다시 패키지한 다음 파일을 복사해야 하므로 grunt-contrib-copy 플러그인이 필요합니다.

복사하기 전에 먼저 소스 파일과 대상 파일을 결정해야 합니다. 여기서 소스 파일은 test 폴더에 있고 대상 파일은 dist 폴더에 있습니다

파일 경로를 만듭니다

var path = {
  src : &#39;test&#39;,
  dest : &#39;dist&#39;,
 }

로그인 후 복사

파일 경로는 만들어졌으니 copy를 살펴볼까요

copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;**/*.*&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },

로그인 후 복사

코드의 주석을 보면 한두가지를 알 수 있습니다. 여기서는 cwd, src, dest에 대해 이야기합니다.

실제로 여기서 소스 경로는 cwd + src 입니다. 이것이 실제 소스 경로입니다. dest는 대상 경로 접두사입니다.

여기서 말하는 것은 src 아래의 모든 파일을 의미합니다. 즉, src 폴더의 파일을 dest 폴더로 복사한다는 의미입니다. 여기에서 복사해야 할 특정 폴더나 파일 형식을 지정할 수 있습니다. 2단계: 파일 압축 여기서는 js와 css만 압축합니다. img 압축의 경우 해당 플러그인을 확인할 수 있습니다. .

css 압축에는 grunt-contrib-cssmin 플러그인이 필요하며 플러그인의 해당 작업 이름은 cssmin

cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;css/*.css&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.css，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },

로그인 후 복사

js 압축에는 grunt-contrib-uglify 플러그인이 필요하며 해당 작업은 플러그인 이름은 uglify

uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;js/*.js&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.js，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },

로그인 후 복사

3단계: 정적 파일 이름 변경 여기서 버전 제어는 정적 파일 이름을 변경하여 수행됩니다.

이름을 바꾸려면 grunt-filerev 플러그인이 필요합니다. 이 플러그인에 해당하는 작업은 filerev

filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : [&#39;<%= path.dest %>/**&#39;, 
      &#39;!<%= path.dest %>/page/*.html&#39;,//html文件不加版本号
      &#39;!<%= path.dest %>/**/*.{png,jpg,jpeg}&#39;]//图片 不需要加版本号
     }
    ]
   }
  },

로그인 후 복사

배열로 전달되는 단 하나의 src 매개변수입니다. 여기에는 다른 서류가 필요하지 않습니다. 따라서 배열의 첫 번째 매개변수인 src/**는 src 폴더의 모든 파일과 일치하며 마지막 두!xx는 제외를 의미합니다.

4단계: html에서 css 및 js에 대한 참조를 수정합니다.

파일을 수정하려면 참고자료를 사용하려면 grunt-usemin 플러그인으로 이동하세요. 플러그인에 해당하는 작업의 이름은 usemin

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   }
  },

로그인 후 복사

html의 주소를 제공하는 src 매개변수가 하나만 있습니다. 아직 CSS가 있으면 이렇게 작성할 수 있습니다

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   },
   css :{
    files : [{
      src : &#39;<%= path.dest %>/css/*.css&#39;
     }
    ]
   }
  },

로그인 후 복사

5단계: 참조 복사, 압축, 이름 바꾸기 및 수정에 대해 이야기했습니다. 여기에는 한 가지 빠진 것이 있습니다. 즉, 다음에서 파일을 삭제해야 합니다. 각 복사 전의 대상 폴더.

파일 참조를 수정하려면 grunt-contrib-clean 플러그인을 사용해야 합니다. 이 플러그인에 해당하는 작업은 clean

clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : [&#39;<%= path.dest %>/&#39;]
     }
    ]
   }
  },

로그인 후 복사

여기에는 주소를 제공하는 단 하나의 src 매개변수가 있습니다. 대상 폴더의.

모든 작업은 여기서 해결됩니다.

등록 업무가 다릅니다

grunt.registerTask(&#39;default&#39;, [&#39;clean:beforebuild&#39;, &#39;copy&#39;, &#39;cssmin&#39;, &#39;uglify&#39;,&#39;filerev&#39;, &#39;usemin&#39;]);

로그인 후 복사

可以看到，我们这里只是注册了任务，并没有应用插件。我们添加插件是听过 load-grunt-tasks 插件完成的

require(&#39;load-grunt-tasks&#39;)(grunt);

로그인 후 복사

这里指令相当于我们一个个写

grunt.loadNpmTasks(&#39;xxx&#39;);

로그인 후 복사

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点：

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点：

这种写法是动态构建文件对象

这种写法是文件数组格式

Description	Github 주소