저는 Grunt, Gulp, Browserify, React, 그리고 Creating Modular View Components with React and Grunt article에 주어진 예제를 실험 해본 결과에 익숙합니다. 내가 여기에 게시 한 툴툴 파일은 기사에서 나왔습니다. 제가하려고하는 것은 똑같은 꿀꺽 마땅한 파일을 작성하는 것입니다. 나는 어떻게 든 그것을 할 수 있었다, 아래 (복사 - 붙여라!) 그러나 나는 혼란 스럽다. 다음과 같은 것을 사용하는 꿀꺽 꿀꺽 소리 파일을 보았습니다 :꿀꺽 거리는 스크립트를 꿀꺽 꿀꺽이게 쓰는 스크립트로 변환
그러나 아래 gulp 파일은 transform을 사용하고 "reactify"를 전달합니다. 그것은 심지어 require'd 모듈의 일부가 아닙니다. 그게 어디서 온거야? 그것이 꿀꺽 꿀꺽 반응인가, 아니면 Browserify 모듈인가?
누락 된 모듈을 Leiningen과 같이 사용할 수없는 경우 깔끔하게 자동 설치합니까?
또 다른 질문
은 다음과 같습니다gulp.src(['react_components/app.jsx']
내가 react_components/*.jsx를 제공하는 경우,이 오류에 대해 불평 : 나는 제공하여 작업 꿀꺽 버전을 얻었다. 나는 그것이 위로 jsx 파일에서 시작하여 재귀 종속성을 처리한다고 가정하고 있습니까? 이 경우 이 *.jsx을 사용하고 있습니다. 나는 혼란 스럽다. :). 이 반응 - 꿀꺽 꿀꺽 마시는 browserify 콤보를하는 가장 좋은 방법은 무엇입니까?
또 다른 질문 : 결과로 연결된 app.built.js에 연결된 JavaScript 파일이 있지만 거대한 (17k 줄) 것으로 나타났습니다. 축소 단계가 누락 된 것 같지만 내장 된 task/npm 모듈은 Google 클로저 컴파일러처럼 사용하지 않는 코드를 제거합니다.
마지막 질문 : 내가 찾은
npm install -g gulpnpm install --save-dev gulp
기사는 두 가지 이유 사이의 DIFF 내가 할 무엇에 명확하지 않다 둘 다 실행해야합니까? npm install -g --save-dev gulp 할 수 없습니까? 내 경험은 Ivy와 Maven (Java 프로젝트)에서이므로 npm이이 경우 어떻게 다른지 확인하려고합니다.
툴툴 번호 :
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
react: {
files: 'react_components/*.jsx',
tasks: ['browserify']
}
},
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
client: {
src: ['react_components/**/*.jsx'],
dest: 'scripts/app.built.js'
}
}
});
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'browserify'
]);
};
꿀꺽 코드 :
var gulp = require('gulp');
var react = require('gulp-react');
var browserify = require('gulp-browserify');
var gutil = require('gulp-util');
var rename = require('gulp-rename');
gulp.task('default', function() {
var production = gutil.env.type === 'production';
gulp.src(['react_components/app.jsx'], {read: false})
// Browserify, and add source maps if this isn't a production build
.pipe(browserify({
debug: !production,
transform: ['reactify'],
extensions: ['.jsx']
}))
.on('prebundle', function(bundler) {
// Make React available externally for dev tools
bundler.require('react');
})
// Rename the destination file
.pipe(rename('app.built.js'))
// Output to the build directory
.pipe(gulp.dest('scripts/'));
});