Grunt 튜 토리 얼 - 전단 자동화

왜 그런 트 를 선 택 했 습 니까?
압축, 컴 파일, 단원 테스트, 코드 검사 등 우 리 는 자동화 가 필요 하 며 중복 노동 을 하지 않 고 작업량 을 줄 일 필요 가 없다.왜 그런 트 를 선 택 했 을까요?더 좋 은 선택 이 없 는 것 같 습 니 다.
준비 작업
node. js 설치
Grunt 는 Node. js 를 기반 으로 설치 하기 전에 Node. js 를 설치 해 야 합 니 다.

shellbrew install node  

npm 업데이트

shellsudo npm install npm -g

grunt - cli 설치
grunt - cli 를 설치 하 는 것 은 Grunt 작업 실행 기 Grunt CLI 를 설치 한 것 과 같 지 않 습 니 다. Gruntfile 이 지정 한 Grunt 버 전 을 실행 하 는 것 입 니 다.이렇게 하면 한 대의 컴퓨터 에 여러 버 전의 Grunt 를 동시에 설치 할 수 있다.(모 르 겠 어, 내 가 직접 실전 할 게)

shellnpm install -g grunt-cli

Grunt 필수 파일
파일 을 만 들 려 면 폴 더 를 만들어 야 합 니 다. 저 는 test 폴 더 를 만 들 었 습 니 다. 하나의 표준 grunt 항목 에 두 개의 파일 이 있어 야 합 니 다.
package. json: 프로젝트 메타 데 이 터 를 저장 하 는 데 사 용 됩 니 다.Gruntfile. js: 작업 을 설정 하거나 정의 하 며 Grunt 플러그 인 을 불 러 옵 니 다.
test 1 폴 더 에 이 두 파일 을 만 듭 시다.그럼 서류 에는 어떤 내용 이 적 혀 있 습 니까?일단 package. json 이 어떤 내용 을 쓰 는 지 지 켜 보도 록 하 겠 습 니 다.

json{
  "name": "test",
  "version": "1.0.0"
}

운행 하 다.
항목 의 루트 디 렉 터 리 에서 아래 명령 을 실행 합 니 다.

shellnpm install

명령 실행 과정

lognpm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data

설명 정보 가 없고 README 같은 것 이 없다 고 루트 디 렉 터 리 에 README. md 파일 을 추가 합 니 다.
내용 추가
package. json 에 다음 내용 을 추가 한 후

{
  "name": "test",
  "version": "1.0.0",
  "description": "     ",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  }
}

그리하여 만사 가 다 잘 되 었 다
그런 트 플러그 인 설치
이 항목 에 Grunt 플러그 인 설치

shellsudo npm install grunt --save-dev

package. json 파일 내용 발견 devDependencies 정보 디 렉 터 리 하나 더 node_modules 폴 더

json{
  "name": "test",
  "version": "1.0.0",
  "description": "     ",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  },
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

실행 npm install --save-dev 은 지정 한 모듈 을 설치 할 뿐만 아니 라 devDependencies 영역 에 자동 으로 추가 되 며 버 전 범 위 를 포함한다.
grunt-contrib-uglify
플러그 인 용도: 압축 js, css 파일 플러그 인 이름: grunt - contrib - uglify
설치 하 다.

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

설치 에 성공 한 후 package. json 의 파일 내용 devDependencies 에 대한 정보 가 추가 되 었 습 니 다.

json  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.8.0"
  }

사용 방법
위 에서 말 한 Grunt 프로젝트 는 두 개의 필수 파일 중 하나 package.json 와 Gruntfile.js 를 필요 로 합 니 다. 대소 문자 에 주의 하 십시오. Linux 는 대소 문 자 를 구분 하여 만 들 고 Gruntfile.js 다음 과 같은 내용 을 기록 해 야 합 니 다.

js//     
module.exports = function(grunt) {

  //     ,         
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // uglify       
    uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            ' */',
          beautify: true,//    
          mangle: false, //      
          compress:true,//              。
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    }
  });

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

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

};

분석 하 다.

banner: build/app.min.js 파일 생 성 날짜 와 같은 내용

files: lib 디 렉 터 리 의 js 압축 을 합 쳐 build 디 렉 터 리 에 생 성 app.min.js

실행 grunt
명령 아래 명령 을 입력 하 십시오. 자, 제 잘못 은 없습니다.오류 가 있 으 면 오류 로그 가 있 습 니 다. 스스로 분석 하 세 요.

shellgrunt

grunt-contrib-watch
플러그 인 용도: 파일 변 화 를 감시 하고 grunt 를 자동 으로 실행 하 는 watch 플러그 인 이름: grunt - contrib - watch
설치 하 다.

shellsudo npm install grunt-contrib-watch --save-dev

쓰다
수정 Gruntfile.jsinitConfig 에 추 가 됐 습 니 다.

js    // watch       
    watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }

한 줄 추가

jsgrunt.loadNpmTasks('grunt-contrib-watch');

배열 에 추가 watch

jsgrunt.registerTask('default', ['uglify','watch']);

watch 를 추가 한 후 전체 Gruntfile.js

js//     
module.exports = function(grunt) {

  //     ,         
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // uglify       
    uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            ' */'
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    },


    // watch       
    watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }


  });

  //   grunt       
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

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

};

grunt-contrib-watch
설치 stylus

shellsudo npm install grunt-contrib-watch --save-dev

수정 Gruntfile.jsinitConfig 에 추가 되 었 습 니 다.

jsstylus:{
    build: {
        options: {
            linenos: false,
            compress: false,
            banner: '\/** 
 *  - 
 * version  
 * author  
 * date  
**/
'
        },
        files: [{
            'css/historyDetail.css': 'styl/historyDetail.styl'
        }]
    }
},

아래 추가

js    grunt.loadNpmTasks('grunt-contrib-stylus');

paths 일부 Stylus 파일 을 자동 으로 @ import 로 도입 합 니 다. 예 를 들 어 일부 Mixin 집합 은 하나의 Stylus 파일 에 두 고 유지 합 니 다. paths 에 쓰 면 각각 Stylus 파일 에서 호출 할 수 있 습 니 다.define 전역 변 수 를 정의 한 다음 에 Stylus 에서 사용 할 수 있 습 니 다. 그러나 저 는 이 설정 을 사용 하 는 것 을 좋아 하지 않 고 전역 변 수 를 단독 Stylus 파일 에 넣 은 다음 에 이 파일 을 paths 의 배열 에 넣 는 것 을 좋아 합 니 다.한 마디 로 CSS 를 직접 생산 하지 않 는 Stylus 코드 를 여러 개 Stylus 파일 로 나 눈 다음 에 모두 paths 에 추가 하면 모든 Stylus 파일 에서 수시로 호출 할 수 있 지만 이러한 Stylus 파일 의 호출 관계 와 사용 우선 순 서 를 주의해 야 한다.compress 및 linenos 두 개의 Boolean 값 으로 압축 처 리 된 CSS 코드 와 CSS 코드 에 주석 을 유지 하 는 지 여 부 를 제어 합 니 다.banner 문자열 입 니 다. CSS 파일 의 맨 앞 에 놓 입 니 다. 보통 주석 을 쓰 는 데 사 용 됩 니 다. 예 를 들 어

banner: '\/** 
 *  - 
 * version  
 * author  
 * date  
**/
'

firebug 플러그 인 파이 어 스타 일 러 스 for Firebug 를 사용 할 지 여 부 를 제어 합 니 다. 파이 어 폭 스에 서 스타 일 러 스 를 디 버 깅 할 수 있 습 니 다.Stylus 일부 Firebug 의 다른 use 플러그 인 을 도입 할 수 있다.
상용 모듈 설정Stylus: 파일 삭제.npm > > grunt: compass 를 사용 하여 sass 파일 을 컴 파일 합 니 다.npm > > grunt-contrib-clean: 파일 통합.npm > > grunt-contrib-compass: 파일 복사.npm > > grunt-contrib-concat: CSS 파일 을 압축 하고 통합 합 니 다.npm > > grunt-contrib-copy: 이미지 압축 모듈.npm > > grunt-contrib-cssmin: JavaScript 문법 을 검사 합 니 다.npm > > grunt-contrib-imagemin: 자 바스 크 립 트 파일 을 압축 하고 통합 합 니 다.npm > > grunt-contrib-jshint: 파일 의 변동 을 감시 하고 해당 동작 을 합 니 다.npm > > grunt-contrib-uglify: stylus 에서 styl 출력 css npm > > 작성