Grunt 압축, js / css 파일 통합

Grunt 소개
Grunt 는 명령 에 기반 한 javascript 프로젝트 명령 행 구축 도구 입 니 다.1. 홈 페이지:http://gruntjs.com/ 2. 중국어 사이트:http://www.gruntjs.net/ 개발 전단 에 html, css, js 세 가지 만 있 습 니 다. 다른 프로 그래 밍 언어 와 달리 많은 모듈, 여러 가지 유형 을 관리 해 야 합 니 다. 왜 구축 도 구 를 사용 합 니까?서버 에 코드 를 올 릴 때 우 리 는 파일 이 가장 적 고 불 러 오 는 속도 가 빠 르 기 를 바 랄 것 입 니 다. 우리 가 쓴 css / js 파일 에는 대량의 빈 칸 이 있 습 니 다. 이 빈 칸 들 은 똑 같이 공간 을 차지 합 니 다. 이 쓸모없는 빈 칸 을 생략 하면 파일 마다 핵 심 만 있 는 코드 입 니 다. 파일 마다 몇 Kb 의 크기 를 절약 하 더 라 도.수천 만, 심지어 더 많은 사용자 가 방문 할 때 서버 에 많은 스트레스 를 줄 일 수 있다.마찬가지 로 한 항목 의 css / js 파일 이 많 으 면 더 많은 자원 을 절약 할 수 있 습 니 다.홈 페이지 에는 빌 드 도 구 를 사용 하 는 이유 와 Grunt 를 사용 하 는 이유 가 홈 페이지 에 올 라 와 있 습 니 다.
왜 구축 도 구 를 사용 합 니까?
자동화반복 되 는 작업, 예 를 들 어 압축 (minification), 컴 파일, 유닛 테스트, linting 등 자동화 도 구 는 당신 의 노동 을 줄 이 고 업 무 를 간소화 할 수 있 습 니 다.Gruntfile 파일 에 작업 을 올 바 르 게 설정 하면 작업 실행 기 는 대부분의 지루 한 작업 을 자동 으로 도와 줍 니 다.
Grunt 를 왜 사용 합 니까?
Grunt 생태 계 는 매우 방대 하고 계속 증가 하고 있다.선택 할 수 있 는 수많은 플러그 인 을 가지 고 있 기 때문에 Grunt 를 이용 하여 어떤 일 을 자동 으로 완성 하고 최소한 의 대 가 를 치 를 수 있 습 니 다.필요 한 플러그 인 을 찾 지 못 하면 Grunt 플러그 인 을 직접 만 들 고 npm 에 발표 할 수 있 습 니 다.
설치
Grunt 에 따라 0.8 버 전 이상 의 node. js 와 npm, node 를 설치 한 후 npm 도 구 를 추가 합 니 다.node 와 npm 버 전 보기:

~ node -v
v6.0.0
~ npm -v
3.9.6

Grunt 설치:

➜  ~ sudo npm install -g grunt-cli
Password:
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
/usr/local/lib
└── grunt-cli@1.2.0

이 때 터미널 에서 grunt 명령 을 실행 하면 오류 가 발생 합 니 다.

➜  ~ grunt      
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

설치 에 실패 했다 고 착각 하지 마 십시오. grunt -help 출력 grunt 도움말 명령 은 설치 에 성공 했다 는 것 을 설명 합 니 다.grunt 를 어떻게 사용 하 는 지 소개 합 니 다.
3. 항목 초기 화
우선 빈 폴 더 를 새로 만 듭 니 다:

mkdir grunttest
cd grunttest

그리고 npm init 돌아 오 는 차 는 기본 값 으로 설정 합 니 다.

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (grunttest) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/yp/Desktop/grunttest/package.json:

{
  "name": "grunttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

현재 grunttest 디 렉 터 리 에 package. json 파일 이 생 성 되 었 습 니 다. 내용 은 다음 과 같 습 니 다.

{
  "name": "grunttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

grunt 를 사용 하려 면 grunt 를 이 항목 에 설치 하고 명령 을 실행 해 야 합 니 다.

sudo npm install grunt --save-dev

실행 완료 후 이 디 렉 터 리 에 node 생 성modules 폴 더, 폴 더 에 저 장 된 일 grunt 의존 패키지.그리고 빈 Grunt. js 파일 을 새로 만 듭 니 다.현재 프로젝트 디 렉 터 리 구 조 는 다음 과 같 습 니 다.

|--grunttest
|--|--package.json
|--|--node_modules
|--|--Gruntfile.js

현재 초기 화 항목 이 완료 되 었 습 니 다. grunt 명령 을 실행 합 니 다.

➜  grunttest grunt
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

기본 task 를 찾 을 수 없습니다. grunt 의 작업 은 Gruntfile. js 파일 에 적 혀 있 습 니 다. 예 를 들 어 압축 파일 은 task 이 고 파일 을 합 친 것 은 task 입 니 다.
압축, 통합 js
프로젝트 디 렉 터 리 에 빈 폴 더 js, css, build, dest 를 새로 만 들 고 각각 js 파일 2 개 와 css 파일 2 개 를 넣 어 테스트 합 니 다. 현재 프로젝트 디 렉 터 리:

|--grunttest
|--|--build
|--|--dest
|--|--js
|--|--｜--index.js
|--|--｜--main.js
|--|--css
|--|--｜--index.css
|--|--｜--style.css
|--|--node_modules
|--|--Gruntfile.js
|--|--package.json

홈 페이지 [grunt 작업 설정] 문서 참조 (http://www.gruntjs.net/configuring-tasks). js 작업 을 압축 하고 통합 합 니 다. Gruntfile. js 에 추 가 됩 니 다.

module.exports = function(grunt) {
    pkg: grunt.file.readJSON('package.json'),
    grunt.initConfig({
        uglify: {
            //    uglify       
            options: {
                banner: '/*!create by yaopan yyyy-mm-dd")%>*/
'
            },
            static_mappings: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/main.js',
                    dest: 'build/main.min.js'
                }],
            }
        },
        concat: {
            bar: {
                src: ["build/*.js"],
                dest: 'dest/all.min.js',
            },
        },
    });


    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('default', ['uglify', 'concat']);
}

이 때 grunt 명령 을 실행 하면 의존 할 패 키 지 를 설치 하 라 고 알려 줍 니 다. 설치 grunt-contrib-uglify

sudo npm install grunt-contrib-uglify --save-dev

설치 grunt-contrib-concat

sudo npm install grunt-contrib-concat --save-dev

작업 수행:

➜  grunttest grunt
Running "uglify:static_mappings" (uglify) task
File build/index.min.js created: 1.49 kB → 899 B
File build/main.min.js created: 767 B → 469 B
>> 2 files created.

Running "concat:bar" (concat) task

Done.

build 폴 더 를 열 면 압축, 합 친 js 파일 을 볼 수 있 습 니 다

압축, 통합 css
Gruntfile. js 에 작업 추가:

module.exports = function(grunt) {
    pkg: grunt.file.readJSON('package.json'),
    grunt.initConfig({
        uglify: {
            //    uglify       
            options: {
                banner: '/*!create by yaopan */
'
            },
            static_mappings: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/main.js',
                    dest: 'build/main.min.js'
                }],
            }
        },
        concat: {
            bar: {
                src: ["build/*.js"],
                dest: 'dest/all.min.js',
            },
            css: {
                src: ["build/*.min.css"],
                dest: 'dest/all.min.css'
            }
        },
         cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'css/',
                    src: ['*.css', '!*.min.css'],
                    dest: 'build',
                    ext: '.min.css'
                }]
            }
        },

    });


    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', ['uglify', 'concat','cssmin']);

}

watch 퀘 스 트
watch 는 파일 의 변경 을 실시 간 으로 감시 할 수 있 습 니 다. css / js 파일 이 변경 되 었 을 때 grunt 를 자동 으로 압축 하여 합 칠 수 있 습 니 다.

module.exports = function(grunt) {
    pkg: grunt.file.readJSON('package.json'),
    grunt.initConfig({
        uglify: {
            //    uglify       
            options: {
                banner: '/*!create by yaopan */
'
            },
            static_mappings: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/main.js',
                    dest: 'build/main.min.js'
                }],
            }
        },
        concat: {
            bar: {
                src: ["build/*.js"],
                dest: 'dest/all.min.js',
            },
            css: {
                src: ["build/*.min.css"],
                dest: 'dest/all.min.css'
            }
        },
        cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'css/',
                    src: ['*.css', '!*.min.css'],
                    dest: 'build',
                    ext: '.min.css'
                }]
            }
        },
        watch: {
            files: ['js/*.js', 'css/*css'],
            tasks: ['uglify', 'concat', 'cssmin']
        }

    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['uglify', 'concat', 'cssmin', 'watch']);



}

파일 이 변경 되 었 을 때 자동 으로 작업 을 수행 합 니 다:

➜  grunttest grunt
Running "uglify:static_mappings" (uglify) task
File build/index.min.js created: 518 B → 310 B
File build/main.min.js created: 2.92 kB → 687 B
>> 2 files created.

Running "concat:bar" (concat) task

Running "concat:css" (concat) task

Running "cssmin:target" (cssmin) task
>> 2 files created. 1.12 kB → 815 B

Running "watch" task
Waiting...
>> File "css/style.css" changed.
Running "uglify:static_mappings" (uglify) task
File build/index.min.js created: 518 B → 310 B
File build/main.min.js created: 2.92 kB → 687 B
>> 2 files created.

Running "concat:bar" (concat) task

Running "concat:css" (concat) task

Running "cssmin:target" (cssmin) task
>> 2 files created. 1.13 kB → 836 B

Done.
Completed in 0.857s at Wed Jun 15 2016 08:24:37 GMT+0800 (CST) - Waiting...

소스 코드
원본 다운로드 주소:http://download.csdn.net/detail/napoay/9549795

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

전단 자동화 워 크 플 로 의 hooks

예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Grunt 압축, js / css 파일 통합

좋은 웹페이지 즐겨찾기