grunt를 사용하여 JavaScript 및 CSS 프로그램을 패키징하는 방법을 배우는 튜토리얼

Grunt.js는 Node.js를 기반으로 하는 자동화된 작업 실행기입니다. NPM의 패키지 종속성 관리와 결합된 Grunt.js는 Maven과 완전히 유사합니다. Grunt.js는 당연히 프런트엔드 애플리케이션을 구축하는 데 적합합니다. JavaScript 프로젝트에 국한되지 않고 다른 언어로 애플리케이션을 구축하는 데에도 사용할 수 있습니다. 점점 더 많은 JavaScript 프로젝트가 이미 Grunt를 사용하고 있으며 유명한 jQuery 프로젝트를 포함하여 가장 큰 사용자가 있습니다.

Grunt 생태계는 빠르게 성장하고 있으며 현재 NPM에 게시된 수백 개의 플러그인 중에서 선택할 수 있습니다. 동시에 누구나 다른 사람이 사용할 수 있도록 자신의 플러그인을 NPM에 쉽게 게시할 수 있습니다.

Grunt는 Maven처럼 빌드 생명주기를 강조하지 않으며, 다양한 작업의 실행 순서를 마음대로 구성할 수 있습니다. Grunt 자체는 단지 실행자일 뿐이며 NPM이 관리하는 플러그인에는 수많은 기능이 존재합니다. 특히 grunt-contrib으로 시작하는 핵심 플러그인은 Handlebars, jade, less, compass, jshint, jasmine, clean, concat, minify, copy, uglify, watch, minify, uglify 등 핵심 기능 대부분을 다룹니다. , 등.

Grunt는 코드 사양 확인(Lint), 병합, 압축, 테스트, 버전 관리 등의 작업을 위한 공통 인터페이스를 제공함으로써 진입 장벽을 크게 낮춥니다.

1. nodejs, grunt, grunt 플러그인 설치

1. nodejs 설치

다운로드 주소 : https://nodejs.org/download/

2. grunt 설치 및 플러그인

npm install grunt -g  //安装grunt,-g全局变量 
npm install grunt-cli -g //安装grunt命令行 
npm install grunt --save-dev  //安装grunt,--save-dev保存到安装目录 
npm install grunt-cli --save-dev //安装grunt命令行 
npm install grunt-contrib-jshint --save-dev //js语法检测插件 
npm install grunt-contrib-concat --save-dev //js合并插件 
npm install grunt-contrib-uglify --save-dev //js压缩插件 
npm install grunt-contrib-cssmin --save-dev //CSS压缩插件

오류를 방지하려면 grunt 및 grunt-cli, -g 및 --save-dev를 설치하는 것이 좋습니다.

3. 작업 디렉터리를 만듭니다.

위 설치가 완료되면 node_modules에 위에서 설치된 플러그인이 포함됩니다. 디렉터리의 node_modules를 새 디렉터리로 복사하고 Gruntfile.js 및 package.json을 생성합니다.
여기서 주목해야 할 점은 Gruntfile.js와 package.json이 node_modules와 동일한 디렉터리에 있어야 한다는 것입니다. grunt 플러그인을 사용할 때 오류가 보고됩니다. 예:

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

grunt-contrib-uglify 플러그인을 설치하지 않으면 다음과 같습니다. 오류도 보고됩니다.

2. Gruntfile.js 및 package.json 생성

1, package.json

{ 
 "name": "jstest", 
 "file": "function", 
 "version": "0.1.0", 
 "devDependencies": { 
 "grunt": "~0.4.5", 
 "grunt-contrib-jshint": "~0.11.3", //后面的数字是版本号，从各个插件目录下的package.json能找到 
 "grunt-contrib-concat": "~0.5.1", 
 "grunt-contrib-uglify": "~0.9.2", 
 "grunt-contrib-cssmin": "~0.14.0" 
 } 
}

2, Gruntfile.js

module.exports = function (grunt) { 
 // grunt配置 
 grunt.initConfig({ 
 pkg: grunt.file.readJSON('package.json'), 
 concat: { 
  options: { 
  separator: ';' 
  }, 
  dist: { 
  src: ['js_s/function.js', 'js_s/jquery.validate.js'], 
  dest: 'js_d/main.js' //合并不压缩 
  } 
 }, 
 uglify: { 
  options: { 
  banner: '/*!   */\n' //文件顶部的注释，可自定义 
  }, 
  build: { //将package.json中的file对应的文件，进行压缩并重命名 
  src: 'js_s/.js',  //注意空格，官方配置例子是pkg.name 
  dest: 'js_d/.min.js' //注意空格，官方配置例子是pkg.name 
  }, 
  buildall: {//将js_s文件夹下的所有js文件，压缩后，放到js_d文件夹中，文件名不变 
  files: [{ 
  expand:true, 
  cwd:'js_s',//js目录下 
  src:'**/*.js',//所有js文件 
  dest: 'js_d'//输出到此目录下 
  }] 
  }, 
  hebin: {//将function.js和jquery.validate.js，合并,并压缩成main.min.js 
  files: { 
   'js_d/main.min.js': ['js_s/function.js', 'js_s/jquery.validate.js'] 
  } 
  }, 
  ymain: {//将main.js压缩成main1.min.js 
  src: 'js_d/main.js', 
  dest: 'js_d/main1.min.js' 
  } 
 }, 
 jshint: { //检查，function.js是不是有语法错误 
  all: ['js_s/function.js'] 
 }, 
 cssmin: { 
  combine: { 
    files: { //将css_s文件夹下的css文件合成一个 
     'css_d/main.css': ['css_s/*.css'] 
    } 
   }, 
  minify: { 
    options: { 
     keepSpecialComments: 0, /* 删除所有注释 */ 
     banner: '/* minified css file */' 
    }, 
    files: { //单个CSS文件压缩 
     'css_d/index.min.css': ['css_s/index.css'] 
    } 
   }, 
  test: {//按文件夹下的所有CSS文件，压缩后，放到新的文件夹中，文件名不变 
    files: [{ 
   expand:true, 
   cwd:'css_s',//css目录下 
   src:'**/*.css',//所有css文件 
   dest: 'css_d'//输出到此目录下 
   }] 
   } 
  } 
 }); 
 // 加载插件 
 grunt.loadNpmTasks('grunt-contrib-uglify'); 
 grunt.loadNpmTasks('grunt-contrib-concat'); 
 grunt.loadNpmTasks('grunt-contrib-jshint'); 
 grunt.loadNpmTasks('grunt-contrib-cssmin'); 
 
 // 是否调用插件功能 
 //grunt.registerTask('default', ['concat','uglify','jshint','cssmin']); 
 // grunt.registerTask('default', ['uglify']); 
 // grunt.registerTask('default', ['concat']); 
 //grunt.registerTask('default', ['jshint']); 
 grunt.registerTask('default', ['cssmin']); //CSSMIN插件的功能能用，其他功能都不起作用 
}

구성 파일이 준비된 후 명령줄에서 , 병합하고 압축하려면 grunt를 입력하세요. 위의 테스트 파일은 기본적으로 병합과 압축을 중심으로 진행됩니다. WEB 프론트 엔드를 수행하는 사람들에게는 이것이 매우 중요합니다.
압축 효과에 관해서는 JS의 압축 효과가 이상적이며 CSS의 압축 효과는 평균입니다. 물론 작성된 코드에 따라 다릅니다.

【관련 추천 튜토리얼】

1. JavaScript 동영상 튜토리얼
JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼