Minification tự động với nodeJS và Gulp task runner

Question

Tôi cần một số lời khuyên để cải thiện việc tối thiểu hóa tự động với nút và gulp.

Mục tiêu chính là tạo các tệp được rút gọn (cho JS và LESS) trong chế độ phát triển và thay đổi các tệp bình thường tự động (js và ít hơn) thành các tệp được rút gọn trong chế độ sản xuất.

Kịch bản chứa:

• NodeJS và ExpressJS cho cấu hình định tuyến và môi trường
• Jade là mẫu động cơ
• Gulp (nhiệm vụ Á hậu)

Đây là thiết lập của tôi:

GULP

Tôi đang sử dụng nút bấm để kích hoạt server.js bắt đầu máy chủ nút của tôi. Trong tệp gulp này, tôi có một số tác vụ (['watch']) để xem các thay đổi trên tệp JS và LESS và rút gọn chúng trong mọi thay đổi.

gulp.task('nodemon', function() { 
    nodemon({ script: 'server.js'}) 
     .on('start', ['watch']) 
     .on('change', ['watch']) 
}) 

NODE

Trong máy chủ nút tôi khiến các quan điểm tiêm và đối tượng mà phát hiện sự phát triển hoặc phương thức sản xuất

var env= process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 

    app.get('/', function(req, res){ 
     res.render('index', {environment: env}); 
    }); 

JADE

Trong giao diện, các đối tượng được tiêm được so sánh để thêm các tệp CSS và JS bình thường cho d chế độ evelopment hoặc các tệp được rút gọn cho chế độ sản xuất

if environment == "development" 
      link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css') 
    else 
      link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.min.css') 

Đây có phải là cách đúng để thực hiện việc này không? Tôi có cần kiểm tra các tùy chọn khác không? Tôi muốn tránh giảm thiểu thủ công trước khi gửi ứng dụng tới máy chủ mỗi lần. Tất cả các lời khuyên sẽ được chấp nhận để cải thiện điều này.

Làm tốt hơn việc giảm thiểu tại gulp lau máy chủ? Làm thế nào tôi có thể làm điều đó với Azure?

Cảm ơn bạn.

Answer 1

Tôi đã tìm thấy giải pháp mới để thực hiện việc rút gọn tự động này.

Với mã câu hỏi của tôi ở trên, bạn có thể tạo, trong chế độ phát triển, tất cả các tệp được rút gọn để tải lên theo cách thủ công lên máy chủ. Có thể được ok nhưng, nếu bạn làm một số thay đổi trong css/js mà không có lauched nhiệm vụ gulp để giảm bớt, thay đổi sẽ không được giảm bớt.

Tôi đã tìm thấy giải pháp mới nếu bạn đang làm việc với Azure. Giải pháp mới của tôi sử dụng KUDU (https://github.com/projectkudu/kudu)

Kudu là động cơ đằng sau việc triển khai git trong Azure Web Sites và nó cũng có thể chạy bên ngoài Azure. Khi bạn triển khai đến Azure, có một lệnh triển khai mặc định cài đặt nút và package.json.

Với Kudu bạn có thể tạo lệnh triển khai tùy chỉnh để khởi chạy tất cả những gì bạn muốn (gulp để rút gọn, grunt, kiểm tra, v.v.). Trong trường hợp này, chúng ta sẽ khởi chạy một nhiệm vụ gulp để rút gọn.

đầu tiên ở tất cả chúng ta sẽ cài đặt tại địa phương xanh-cli cho tạo ra một kịch bản triển khai tùy chỉnh cho Azure:

npm install -g azure-cli 

Sau đó, chúng tôi tạo ra các lệnh tùy chỉnh

azure site deploymentscript --node 

này sẽ bổ sung sau file vào thư mục của bạn:

• .deployment
• deploy.cmd

.deployment khởi deploy.cmd (cần thiết cho xanh)

Nếu bạn kiểm tra deploy.cmd bạn thấy rằng cài đặt tất cả các gói cần thiết. Vì vậy, cho ra mắt grunt trong máy chủ chúng ta cần thêm này trong phần thiết lập:

IF NOT DEFINED GULP_CMD (
    :: Install gulp 
    echo Installing Gulp 
    call npm --registry "http://registry.npmjs.org/" install gulp -g --silent 
    IF !ERRORLEVEL! NEQ 0 goto error 

    :: Locally just running "gulp" would also work 
    SET GULP_CMD="%appdata%\npm\gulp.cmd" 

) 

và thay đổi phần triển khai như thế này:

:Deployment 
echo Handling node.js deployment. 

:: 1. Select node version 
call :SelectNodeVersion 

:: 2. Install npm packages 
IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
    pushd "%DEPLOYMENT_TARGET%" 
    call :ExecuteCmd !NPM_CMD! install 
    IF !ERRORLEVEL! NEQ 0 goto error 
    popd 
) 

:: 3. Install npm packages 
echo "Execute Gulp" 
IF EXIST "%DEPLOYMENT_TARGET%\gulpfile.js" (
    pushd "%DEPLOYMENT_TARGET%" 
    call :ExecuteCmd !GULP_CMD! YOUR_GULP_TASK_TO_EXECUTE 
    IF !ERRORLEVEL! NEQ 0 goto error 
) 

popd 

:: 4. KuduSync 
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
    call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd" 
    IF !ERRORLEVEL! NEQ 0 goto error 
) 

Với kịch bản triển khai tùy chỉnh cho xanh, mỗi khi bạn thực hiện một triển khai (đẩy chi nhánh của bạn sang xanh) gulp sẽ khởi chạy tác vụ YOUR_GULP_TASK_TO_EXECUTE (trong trường hợp của tôi là "phong cách" để khai thác tối thiểu thành các tệp không.)

Nếu một lỗi sẽ được thực hiện trong suốt quá trình triển khai, việc thực hiện Azure của trang web của chúng tôi sẽ thất bại (kiểm tra đăng ký). Tôi khuyên bạn nên khởi chạy deploy.cmd tại địa phương để xem cách hoạt động trong Azure và nếu nó sẽ sụp đổ.

Bạn có thể tùy chỉnh tập lệnh này để khởi chạy muốn bạn muốn trong mỗi lần triển khai.

Tôi hy vọng điều đó sẽ hữu ích!

Answer 2

gì tôi thường là chính xác những gì bạn muốn tránh .. :)

Trong phát triển tôi có một số nhà quan sát đang linting js file, dịch bút stylus để css và tạo partials html tĩnh của tôi từ ngọc bích. Bước cuối cùng của họ là sử dụng plugin gulp-inject tuyệt vời để thực hiện cuộc gọi đến các tài sản chưa được xác định trong tệp chỉ mục của tôi. Tất cả các tệp này được đặt trong thư mục xây dựng.

Khi tôi muốn thử nghiệm môi trường sản xuất của mình, tôi có nhiệm vụ dist, tất cả các tài sản có trong thư mục xây dựng ghép và rút gọn chúng, áp dụng hậu tố rev cho tên cho bộ nhớ cache busting và gulp-inject i sẽ cập nhật tệp index.html với các liên kết nội dung được rút gọn.

Trong máy chủ, tôi kiểm tra môi trường và hướng dẫn diễn đạt (với gói phân phối tĩnh) để phục vụ thư mục xây dựng hoặc phân phối phù hợp.

Trong khi tạo trang Web của bạn trong Azure, bạn có thể chỉ định giá trị process.env.NODE_ENV của mình để bạn có thể không cần sửa đổi thời gian chạy cho mã của mình.