Grunt+Bower-전단 구축 이기

7004 단어 grunt
현재 비교적 유행 하 는 WEB 개발 의 추 세 는 전후 단 분리 다.전단 은 Angular,Ember 등 중량급 Javascript 프레임 워 크 를 사용 하고 백 엔 드 는 restful API 의 웹 서비스 서 비 스 를 사용 하여 JSON 형식 으로 데이터 인 터 랙 션 을 한다.
  백 엔 드 서비스 언어 에 있어 Ruby 의 rack,자바 의 Maven 또는 Gradle,또는 Scala 의 SBT 를 막론하고 컴 파일 실행,실행 테스트,포장 배치,의존 관리 등 기능 을 제공 할 수 있 습 니 다.게다가 강력 한 플러그 인 시스템 은 데이터 이동 도구(liquibase),덮어 쓰기 플러그 인 테스트 및 코드 스타일 검사 도구 와 같은 강력 한 기능 을 삽입 식 으로 사용 할 수 있 도록 합 니 다.
  그러나 앞부분 자 바스 크 립 트 와 CSS 의 경우 앞에서 말 한 기능 의 집합 을 할 수 있 는 도구 가 드물다.그러면 우 리 는 어떻게 해야만 앞에서 말 한 기능 이 있다 고 말 할 수 있 습 니까?Grunt + Bower
   Grunt자 바스 크 립 트 세계 의 구축 도구 라 고 불 리 며 강력 한 자동화 기능 을 제공 했다.반복 되 는 작업,예 를 들 어 압축(minification),컴 파일,유닛 테스트,linting 등 자동화 도 구 는 우리 의 노동 을 줄 일 수 있 습 니 다.Grunt 역시 강력 한 플러그 인 시스템 을 가지 고 있 습 니 다.당신 이 필요 로 하 는 대부분의 task 는 Grunt 플러그 인 으로 개발 되 었 고 매일 더 많은 플러그 인 이 탄생 합 니 다.
  하지만 아직 완벽 하지 않다.
  우 리 는 자바 스 크 립 트 개발 에서 우 리 는 항상 대량의 오픈 소스 도 구 를 도입 해 야 한 다 는 것 을 안다.Bootstrap 이 의존 하 는 JQuery 는 1.10 이 아니 라 2.03 이다.만약 당신 이 JS 버 전 업 그 레이 드 를 하고 있다 면,나 는 당신 이 반드시 각 사이트 에 가서 그들의 최신 가방 을 다운로드 한 후에 조심스럽게 그것 의 버 전 을 교체 할 것 이 라 고 생각 합 니 다.그러나 이 기능 들 은 Gradle 과 다른 백 엔 드 의 버 전 관리 도구 에서 더 이상 문제 가 되 지 않 습 니 다.Bower의 등장 으로 이 어 려 운 문 제 를 완벽 하 게 해결 했다.
  javascript 의 세계 에서 많은 것들 이 지역 사회 에서 제공 되 기 때문에 모든 도 구 는 상당히 독립 적 입 니 다.예 를 들 어 도 구 는 모두 자신 만 의 독립 된 프로필 을 가지 고 있 고 자신의 명령 행 인 자 를 가지 고 있 으 며 가끔 은 추가 플러그 인 이 두 도 구 를 결합 시 켜 야 합 니 다.그래서 아래 에 많은 명령 이 있 을 것 입 니 다.우 리 는 일일이 알 아야 합 니 다.다행히 우리 가 알 게 된 후에 다음 에는 이미 설 정 된 파일 을 사용 할 수 있 고 몇 가지 명령 을 통 해 모든 것 을 준비 할 수 있어 서 매우 편리 하 다.
STEP 1:nodejs 설치
Mac 에서 우 리 는 brew 를 사용 하여 설치 할 수 있다.다른 시스템 에 서 는 해당 도 구 를 사용 하거나 홈 페이지 에 직접 다운로드 하 십시오.
brew install node

Nodejs 는 서버 에서 자바 script 프로 그래 밍 을 사용 할 수 있 습 니 다.이것 은 많은 js 도구 의 기초 입 니 다.그것 이 최신 인지 확인 하 세 요:
brew upgrade node

Npm 는 node 가 공식 적 으로 제공 하 는 가방 의존 관리 도구 입 니 다.우리 가 아래 에 사용 하 는 Grunt,Bower 등 은 모두 플러그 인 형식 으로 다운로드 하여 설치 한 것 입 니 다.우리 가 nodejs 를 설치 한 후, npm 자동 으로 사용 할 수 있 습 니 다.버 전 보기:
npm -v

다음 디 렉 터 리 grunt 새로 만 들 기bower,그리고 npm init 를 실행 합 니 다.알림 에 따라 마지막 에 package.json 이 다음 과 같 습 니 다.
{

  "name": "grunt_bower",

  "version": "1.0.0",

  "description": "This is for grunt and bower",

  "main": "index.js",  "repository": {

    "type": "git",

    "url": "https://github.com/yeahyangliu/grunt_bower.git"

  }

}

두 번 째 단계:Grunt 설치
Grunt 명령 행(CLI)을 전역 환경 에 설치 해 야 합 니 다.설치 시 sudo 를 사용 해 야 할 수도 있 습 니 다:
npm install -g grunt-cli

상기 명령 을 집행 한 후grunt 명령 은 시스템 경로 에 추 가 됩 니 다.이후 에는 모든 디 렉 터 리 에서 이 명령 을 수행 할 수 있 습 니 다.
주의,설치grunt-cli는 Grunt 를 설치 한 것 과 같 지 않 습 니 다!Grunt CLI 의 작업 은 매우 간단 합 니 다.같은 디 렉 터 리 에서 Grunt 를 호출 합 니 다.같은 시스템 에 여러 버 전의 Grunt 를 동시에 설치 할 수 있다 는 장점 이 있다.
Grunt 프로젝트 에 서 는 일반적으로 프로젝트 에 두 개의 파일 을 추가 해 야 합 니 다.Gruntfile 화해시키다  package.json 。그 중에서 package.json 에는 Grunt 에서 자주 사용 하 는 플러그 인 이 포함 되 어 있 습 니 다.예 를 들 어 grunt-contrib-jshint 등,우 리 는 필요 에 따라 쓸모 없 는 것 을 삭제 할 수 있다.그럼 지금 우리 파일 은 이렇게 생 겨 야 합 니 다.
{

  "name": "grunt_bower",

  "version": "1.0.0",

  "description": "This is for grunt and bower",

  "main": "index.js",

  "engines": {

    "node": ">= 0.10.0"

  },



  "devDependencies": {

    "grunt": "~0.4.5",

    "grunt-contrib-jshint": "~0.10.0",

    "grunt-contrib-watch": "~0.6.1",

    "grunt-contrib-qunit": "~0.5.2",

    "grunt-contrib-concat": "~0.4.0",

    "grunt-contrib-uglify": "~0.5.0"

  }



  "repository": {

    "type": "git",

    "url": "https://github.com/yeahyangliu/grunt_bower.git"

  },

  "author": "Yang Liu"  

}

다음은 gruntfile 이 필요 합 니 다.gruntfile 에서 플러그 인의 기능 을 정의 하고 자바 script 코드 를 관리 하 는 작업 을 사용자 정의 할 수 있 습 니 다.다음 명령 을 실행 하여 gruntfile 을 만 듭 니 다:
npm install grunt-init -g

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

grunt-init gruntfile

다음은 모든 package.json 의 플러그 인 을 npm 를 통 해 이 디 렉 터 리 에 설치 하면 Grunt 를 사용 하여 실행 하고 자바 script 코드 를 관리 할 수 있 습 니 다.
STEP 3:Bower 설치
Bower 는 npm 와 특정한 의미 에서 비슷 합 니 다.이것 은 자주 사용 하 는 js 라 이브 러 리 의 의존 도 를 관리 하 는 데 사 용 됩 니 다.예 를 들 어 jquery,underscore,angularjs 등 입 니 다.마찬가지 로 우 리 는 npm 를 통 해 그것 을 설치 할 수 있다.
npm install bower -g

마찬가지 로 Bower 도 자신의 프로필 bower.json 이 있 습 니 다.
{

  name: 'grunt_bower',

  version: '0.0.0',

  authors: [

    'YANG Liu <[email protected]>'

  ],

  license: 'MIT',

  ignore: [

    '**/.*',

    'node_modules',

    'bower_components',

    'test',

    'tests'

  ]

}

다음은 우리 가 기적 을 보 는 순간 이다.
bower install angularjs --save
bower insall jquery --save

angular 와 JQuery 가 로 컬 로 다운로드 되 었 음 을 볼 수 있 습 니 다.동시에 bower.json 에서 두 가지 의존 도가 증가 했다.
"dependencies": {  

    "angularjs": "~1.2.20",  "jquery": "~2.1.1"

}

그리고 우리 디 렉 터 리 에는 두 버 전의 js 파일 도 로 컬 에 다운로드 되 었 다.만약 당신 이 지금 이미 큰 성 과 를 거 두 었 다 고 생각한다 면,당신 은 틀 렸 습 니 다.bower 는 로 컬 에 의존 하 는 것 만 책임 집 니 다. bower_components 디 렉 터 리 는 우리 프로젝트 에서 실제 사용 하 는 곳 으로 복사 하 는 것 을 책임 지지 않 습 니 다.예 를 들 어 public/js/lib 목록 아래.
이러한 기능 을 실현 하기 위해 서 우 리 는 또 다른 플러그 인의 도움 이 필요 합 니 다.
npm install grunt-bower-task --save-dev

그리고 그문서.를 열 고 위의 제시 에 따라 설정 합 니 다.먼저 Gruntfile 적당 한 위치 추가:
grunt.loadNpmTasks('grunt-bower-task');

그리고 grunt.initConfig({...}) 매개 변수 에 해당 하 는 설정 항목 을 추가 하여 bower 에서 다운로드 한 js 라 이브 러 리 를 복사 합 니 다. public/js/lib 다음:
{

  "bower": {   

   "install": { 

        "options": {

                "targetDir": "./public/js/lib",

                "layout": "byComponent",

                "install": true,

                "verbose": false,

                "cleanTargetDir": false

              }

          }

      }

}

마지막 으로 우 리 는 간단 한 명령 만 실행 하면 grunt 와 bower 가 완벽 하 게 결합 되 었 다 고 말 할 수 있다.
grunt bower

마지막.
이러한 두 가지 이기 가 있 습 니 다.우 리 는 관리 의존,컴 파일 배치,압축 포장,테스트 를 실행 하 는 모든 기능 을 달성 하고 프로젝트 에 있 는 사람들 이 똑 같은 설정 을 가지 게 합 니 다.이런 방식 은 단체의 관리 효율 과 유지 원 가 를 크게 간소화 하여 매우 숭배 할 만 합 니 다!
여기까지 읽 어 주 셔 서 다시 한 번 감 사 드 립 니 다.
nginx_소스 코드 버 전nginx.conf
Android---시스템 자원 읽 기 getResources

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage