Làm thế nào để sử dụng grunt-contrib-ganeload?

Question

Tôi đang cố gắng sử dụng grunt-contrib-livereload, nhưng dường như không thể tìm ra. The readme dường như bỏ qua mọi thứ tôi cần giải thích, và sau đó kết thúc bằng một ví dụ không hoạt động khi tôi thử và dường như không liên quan trực tiếp đến tài liệu. Tôi đã tìm kiếm một lời giải thích tốt hơn trong một bài đăng blog hoặc hướng dẫn hoặc bất cứ điều gì, nhưng đã không thể tìm thấy một. Ai đó có thể vui lòng giải thích cách bắt đầu với công cụ này?

Dưới đây là các loại câu hỏi tôi có, dựa trên the readme:

Các tài liệu cho biết nhiệm vụ livereload "phải được thông qua danh sách các tập tin đã thay đổi" --- nhưng làm thế nào để vượt qua nó trong danh sách này tệp? Ví dụ này dường như không minh họa điều này. Có liên quan vượt qua danh sách?

Yêu cầu kết nối phải đóng góp không? Nó làm gì và tôi sử dụng nó như thế nào? Tôi có cần phải tìm hiểu kết nối trước khi tôi thử sử dụng chức năng gan?

Readme đề cập đến phần mềm trung gian là "phải là phần tử đầu tiên được chèn" --- nhưng được chèn vào phần nào, trước cái gì khác? Và nó được chèn vào như thế nào?

Và tôi cho rằng tôi không hiểu cách tôi cần điều khiển cổng. "Tất cả các trình duyệt nghe trên cổng tải gan sẽ được tải lại" --- nhưng làm cách nào để biết trình duyệt nào đang nghe cổng nào? Tôi có cần phải tìm hiểu tất cả về các cổng trước khi tôi có thể thử sử dụng tải gan? (Mọi gợi ý về cách tìm hiểu tốt nhất về điều đó?)

Cuối cùng, trong ví dụ, có một hàm folderMount dường như không liên quan đến bất kỳ tài liệu nào trước đây. Đó là gì, và tôi có cần nó không?

Tôi đoán tôi đang hỏi nếu ai đó có thể hài lòng:

• điểm tôi hướng tới một hướng dẫn đó là nhiều hơn nữa hiệu quả hơn so với readme hiện hành;
• giải thích những phần không giải thích được này của readme, nếu những câu trả lời đó là những gì tôi cần để hiểu plugin;
• hoặc cung cấp ví dụ chức năng với một số giải thích về lý do tại sao chức năng hoạt động.

Answer 1

Sống nạp lại hiện đang được xây dựng vào grunt-contrib-watch phiên bản 0.4.0. grunt-contrib-livereload và grunt-regarde sẽ không còn được dùng nữa.

Bây giờ chỉ cần thiết lập các tùy chọn livereload để true trong cấu hình của bạn và nó sẽ tạo ra một máy chủ tải lại sống sau đó tải lại sau khi nhiệm vụ đã chạy:

grunt.initConfig({ 
    watch: { 
    all: { 
     options: { livereload: true }, 
     files: ['lib/*.js'], 
     tasks: ['jshint'], 
    }, 
    }, 
}); 

Theo mặc định, máy chủ tải lại sống sẽ được bắt đầu trên cổng 35729 . Vì vậy, để bật tải lại trực tiếp trên trang của bạn, chỉ cần thêm <script src="http://localhost:35729/livereload.js"></script> vào trang của bạn.Thông tin

Xem thêm về các tài liệu: https://github.com/gruntjs/grunt-contrib-watch#live-reloading

Answer 2

Chỉnh sửa: Kiểm tra thông tin phiên bản. grunt-contrib-watch hiện đã hỗ trợ tải trọng gan.

Thật là chóng mặt. Tôi đã gặp phải vấn đề với vấn đề này vì vậy hãy để tôi làm những gì tôi có thể giải thích (hoặc ít nhất là giúp bạn và chạy). Xin lưu ý, đây là cách Tôi thiết lập và dường như hoạt động phần lớn thời gian.

Để bắt đầu, bạn sẽ muốn đảm bảo rằng bạn đã udpated package.json của bạn với các phụ thuộc phù hợp. Tôi không chắc chắn rằng ganeload hoạt động với các nướng trong "xem" nhiệm vụ và tôi đã sử dụng grunt-regarde của cuối. package.json tôi thường trông như thế này:

"dependencies": { 
    "grunt": "~0.4.x", 
    "grunt-contrib-livereload": "0.1.2", 
    "grunt-contrib-connect": "0.2.0", 
    "grunt-regarde": "0.1.1" 
}, 

Obvi bạn muốn grunt (duhhh), livereload, kết nối dường như để giúp gắn các thư mục, và regarde là như grunt-đồng hồ, nó chỉ có vẻ để làm việc tốt hơn (tôi quên lý do chính xác).

Bạn có thể làm cho package.json của mình tốt hơn nữa bằng cách chỉ định tải trọng trong đối tượng "devDependencies" của riêng nó nếu bạn nghiêng.Bây giờ, hãy chạy tốt fasioned cũ của bạn npm install để có được những goodies trong dự án của bạn.

Hãy nói gruntfiles:

Như bạn có thể biết, gruntfile là điều khiến kỳ diệu xảy ra. Một nơi nào đó về phía dưới cùng của gruntfile của bạn, bạn sẽ muốn chỉ định

grunt.loadNpmTasks('grunt-regarde'); 
grunt.loadNpmTasks('grunt-contrib-livereload'); 
grunt.loadNpmTasks('grunt-contrib-connect'); 

Ở đầu của gruntfile của bạn, chúng tôi sẽ muốn thêm một số utils cho ganeload. Dưới /*global module:false*/, hãy tiếp tục và thêm var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;.

Sau đó, bạn không thực sự cần phải tìm hiểu kết nối, bạn chỉ cần sử dụng nó. Kiểm tra phong cách của tôi:

var folderMount = function folderMount(connect, point) { 
    return connect.static(path.resolve(point)); 
}; 

này đi kèm trước khi module.exports = function(grunt) {

Bây giờ chúng ta hãy vào thịt của gruntfile. Một lần nữa, tôi quên những gì kết nối đang làm nhưng đây là nơi ma thuật trung gian đi vào chơi. Trong modules.exports của bạn, hãy thêm:

connect: { 
    livereload: { 
    options: { 
     port: 9999, 
     middleware: function(connect, options) { 
     return [lrSnippet, folderMount(connect, '.')] 
     } 
    } 
    } 
}, 

Bây giờ, chúng tôi muốn có các tệp được xem. Tôi muốn thiết lập một vài nhiệm vụ khác nhau vì tôi không muốn toàn bộ quá trình grunt của tôi chạy mỗi khi tôi lưu một tệp CSS. Đây là những gì tôi làm việc với (một lần nữa, thêm vào module.exports):

regarde: { 
    txt: { 
    files: ['styles/*.css', 'index.html'], 
    tasks: ['livereload'] 
    }, 
    styles: { 
    files: ['sass/*.scss', 'sass/*/*.scss'], 
    tasks: ['compass'] 
    }, 
    templates: { 
    files: ['templates/*.jade'], 
    tasks: ['jade'] 
    } 
}, 

Bạn có thể thấy rằng tôi chỉmuốn livereload để bắn khi có những thay đổi để css biên soạn của tôi (*.css) hoặc html biên soạn của tôi. Nếu tôi chỉnh sửa một tập tin SCSS, tôi muốn chỉ tắt la bàn. Nếu tôi chỉnh sửa một mẫu ngọc bích, tôi muốn chỉ gửi ngọc bích đến trình biên dịch HTML. Tôi nghĩ bạn có thể thấy những gì đang xảy ra. Bạn có thể chơi với điều này, chỉ cần thông minh về nó bởi vì bạn có thể bị bắt trong một vòng lặp vô hạn.

Cuối cùng, bạn cần kích hoạt các quy trình này. Tôi thích buộc tất cả chúng vào nhiệm vụ chính của tôi vì gruntfile của tôi chỉ là rằng ngọt ngào.

// Default task. 
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']); 

Bây giờ, khi bạn cháy lên grunt trong CLI, bạn nên (hy vọng, có thể, bắt chéo ngón tay của bạn) có được một cái gì đó như thế này:

Running "connect:livereload" (connect) task 
Starting connect web server on localhost:9999. 

Browse để http://localhost:9999/yourpage.html và xem kỳ diệu xảy ra.

full gruntfile here.full package.json here.

Answer 3

Here is a solution dựa trên Gulp thay vì Grunt và Gulpfile.js sau để có được livereload làm việc:

var gulp = require('gulp'); 
var connect = require('connect'); 
var connectLivereload = require('connect-livereload'); 
var opn = require('opn'); 
var gulpLivereload = require('gulp-livereload'); 

var config = { 
    rootDir: __dirname, 
    servingPort: 8080, 

    // the files you want to watch for changes for live reload 
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js'] 
} 

// The default task - called when you run `gulp` from CLI 
gulp.task('default', ['watch', 'serve']); 

gulp.task('watch', ['connect'], function() { 
    gulpLivereload.listen(); 
    gulp.watch(config.filesToWatch, function(file) { 
    gulp.src(file.path) 
     .pipe(gulpLivereload()); 
    }); 
}); 

gulp.task('serve', ['connect'], function() { 
    return opn('http://localhost:' + config.servingPort); 
}); 

gulp.task('connect', function(){ 
    return connect() 
    .use(connectLivereload()) 
    .use(connect.static(config.rootDir)) 
    .listen(config.servingPort); 
}); 
 

Answer 4

Tôi biết đây là một ít tuổi nhưng có thể giúp một người nào đó . Trong Gruntfile.js thêm "tùy chọn":

sass: { 
    files: 'scss/**/*.scss', 
    tasks: ['sass'], 
    options: { 
     livereload: true, 
    } 
    } 

Trong chỉ số add:

<script src="http://localhost:35729/livereload.js"></script>