contrib-copyまたはtinyimgによる変更が宛先（！）で生成された場合、livereloadは起動しましたが、ページをリロードしません。

Question

これは私の問題です。

以下のgruntfile.jsのすべてのパスはよく見られます（--verbose -vで示されています）。 LiveRoadは、ファイルを変更するたびに起動します（少なくとも--verboseはlivereloadの発生を示します）。しかし、私の/development/index.html（サブライムテキスト）または/less/mainpage.less（contrib-less）を変更した場合にのみ、ページはライブリロードされます。

私は/テスト//*、livereload火災での開発/ IMG//*またはanytingを変更するが、私のページをリロードしていない場合。

誰かが助けてくれたら本当にありがたいです。ここで

は私のフォルダ構造です：

ここ

source location root: /development/

destination location root: /test/

は私gruntfile.jsです：

module.exports = function(grunt) { 
grunt.initConfig({ 

watch: { 
    livereload: { 
     files: ['development/*.html', "test/**/*", "development/img/**/*"], 
     options: { 
      livereload: true, 
      spawn: false 
     } 
    }, 

    // watch tasks start here 
    scripts: { 
     files: ['development/js/**/*.js'], 
     tasks: ['concat'] 
    }, 
    html: { 
     files: ['development/*.html'], 
     tasks: ['copy:html'] 
    }, 
    less_compile: { 
     files: ['development/a_source/less/**/*.less'], 
     tasks: ['less', "stripCssComments"] 
    }, 
    images: { 
     files: ['development/img/**/*'], 
     tasks: ['tinyimg'] 
    } 
}, 

// runs local server for livereload 
connect: { 
    sever: { 
     options: { 
      hostname: 'localhost', 
      port: 3000, 
      base: 'test/', 
      livereload: true 
     } 
    } 
}, 

// *** *.html, *.img copy task here 
copy: { 
    html: { 
     expand: true, 
     cwd: 'development', 
     src: '*.html', 
     dest: 'test/', 
    } 
}, 

// *** LESS tasks here 
less: { 
    compile: { 
     options: { 
      paths: ["development/b_components/less/"] 
     }, 
     files: { 
      "temp/css/style.css": "development/a_source/less/style.less" 
     } 
    } 
}, // compiles less and put compiled version into /temp/css/style.test 

stripCssComments: { 
    dist: { 
     files: { 
      'test/css/style.css': 'temp/css/style.css' 
     } 
    } 
}, // strips comments from /temp/css/style.css and copies it to /test/ 

// minify images 
tinyimg: { 
    dynamic: { 
     files: [{ 
      expand: true, // Enable dynamic expansion 
      cwd: 'development/img/', // Src matches are relative to this path 
      src: ['**/*.{png,jpg,gif}'], // Actual patterns to match 
      dest: 'test/img/' // Destination path prefix 
     }] 
    } 
} 

}); //initConfig 

grunt.loadNpmTasks('grunt-contrib-less'); 
grunt.loadNpmTasks('grunt-strip-css-comments'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-copy'); 
grunt.loadNpmTasks('grunt-contrib-connect'); 
grunt.loadNpmTasks('grunt-tinyimg'); 

grunt.registerTask('default', ["connect", "watch"]); 

}; //wrapper function 

Answer 1

この

livereload:{ 
    options:{ 
     livereload:'<%= connect.options.livereload %>' 
    }, 
    files:[ 
     'app/{,*/}*.html', 
     'app/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
    ] 
    } 

をお試しください

イメージフォルダに変更を加えた場合、これは再読み込みする必要があります。 （あなたの構造に合わせてURLをカスタマイズしてください）

Answer 2

OK。私はすべての私の問題を解決した後で包み込みたい。

私は、次の許容可能な作業のセットアップに到着しました：
を - 上記の通り：うなり声は、すべてのコンパイル/連結/コピーなど 仕事をしているとしてだけで「ファイル」労働者を提供しています。
- browser-syncはローカルサーバー（他の重要な機能を備えています）と高速livereloadツールです。さらに、 いくつかの開いているテストウィンドウ（https://browsersync.io/）を同期します。
- Divvy：私のワークフローには、飛行中にデスクトップ上にウィンドウを配置することができます（http://mizage.com/divvy/）。

Answer 3

更新： すぐに私はGulp + Browsersyncに切り替えました。私はもっ​​と満足することができませんでした。 Gulpは約10倍高速で、Browsersyncはスムーズで便利です。

var gulp = require("gulp"), 
 
    gutil = require("gulp-util"), 
 
    less = require('gulp-less'), 
 
    concat = require('gulp-concat'), 
 
    browserify = require('gulp-browserify'), 
 
    browserSync = require('browser-sync').create(), 
 
    gulpcopy = require('gulp-copy'), 
 
    newer = require('gulp-newer'), 
 
    imagemin = require('gulp-imagemin'), 
 
    autoprefixer = require('gulp-autoprefixer'), 
 
    uglifyjs = require('gulp-uglify'), 
 
    cleanCSS = require('gulp-clean-css'), 
 
    uglifycss = require('gulp-uglifycss'), 
 
    htmlmin = require('gulp-htmlmin'), 
 
    htmlhint = require("gulp-htmlhint"), 
 
    htmlv = require('gulp-html-validator'), 
 
    validatecss = require('gulp-w3c-css'), 
 
    sourcemaps = require('gulp-sourcemaps'); 
 

 
var lessMain = ["src/styles/less/styles.less"], 
 
    lessSources = ["src/styles/less/*.less", "src/styles/**/*.css"], 
 
    jsSources = "src/js/*.js", 
 
    jsonSources = ["src/js/*.json"], 
 
    htmlSources = ["src/html/*.html"], 
 
    imgSources = ["z_design/images/processed/**/*.*"], 
 
    imgDest = ["public/img/**/*.*"], 
 
    cssTemp = ["src/temp/css/styles.css"], 
 
    srcjQuery = "node_modules/jquery/dist/jquery.min.js", 
 
    srcMustache = "node_modules/mustache/mustache.min.js"; 
 

 
gulp.task("message", function() { 
 
    gutil.log("============= Gulp script started =============="); 
 
}); 
 

 
// compiling less 
 
gulp.task("less-compile", function() { 
 
    gulp.src(lessMain) 
 
     // switches sourcemaps on/off 
 
     .pipe(sourcemaps.init()) 
 

 
     .pipe(less() 
 
      .on("error", gutil.log)) 
 

 
     // switches sourcemaps on/off 
 
     .pipe(sourcemaps.write()) 
 

 
     // change .dest("folder") to "public/css" 
 
     // to make no-autoprefix 
 
     // or to "src/temp/css/" to switch autoprefix on 
 
     .pipe(gulp.dest("public/css")) 
 
}); 
 

 
// prepare & copy js files 
 
gulp.task("js", function() { 
 
    gulp.src([srcjQuery, srcMustache, jsSources]) 
 
     .pipe(concat("script.js")) 
 
     .pipe(gulp.dest("public/js/")) 
 
}); 
 

 
// .pipe(browserify()) 
 
// {bundleExternal: false} 
 

 
// copy JSON files 
 
gulp.task("copyjson", function() { 
 
    gulp.src(jsonSources) 
 
     .pipe(newer("public/js/")) 
 
     .pipe(gulpcopy("public/js/", { 
 
      prefix: 2 
 
     })) 
 
}); 
 

 
// copy html files 
 
gulp.task("copyhtml", function() { 
 
    gulp.src(htmlSources) 
 
     .pipe(newer("public/")) 
 
     .pipe(gulpcopy("public/", { 
 
      prefix: 2 
 
     })) 
 
}); 
 

 

 
// --- minify & compress images: 2 tasks - auto and manual 
 

 
// minify & copy images - manual task 
 
gulp.task("img-ondemand", function() { 
 
    gulp.src("z_design/images/unprocessed/**/*.*") 
 
     .pipe(newer("public/img/")) 
 
     .pipe(imagemin({ 
 
      progressive: true 
 
     })) 
 
     .pipe(gulp.dest('z_design/images/processed/')) 
 
}); 
 

 
// minify & copy images - automatic task 
 
gulp.task("processimages", function() { 
 
    gulp.src(imgSources) 
 
     .pipe(newer("public/img/")) 
 
     .pipe(imagemin({ 
 
      progressive: true 
 
     })) 
 
     .pipe(gulp.dest('public/img/')) 
 
}); 
 
// --- end 
 

 
// forced reload 
 
gulp.task("reload", function() { 
 
    browserSync.reload(); 
 
}); 
 

 
// autoprefixer 
 
gulp.task("autoprefix", function() { 
 
    gulp.src(cssTemp) 
 
     .pipe(autoprefixer({ 
 
      browsers: ['last 3 versions', 'safari 5', 'ie 8', 'ie 9', 'ie 10', "ie11", 'opera 12.1', 'ios 6', 'android 4'], 
 
      cascade: false 
 
     })) 
 
     .pipe(gulp.dest("public/css/")) 
 
}); 
 

 
// watching for changes 
 
gulp.task("watch", function() { 
 
    gulp.watch(lessSources, ["less-compile"]) 
 
    gulp.watch(jsSources, ["js"]) 
 
    gulp.watch(jsonSources, ["copyjson"]) 
 
    gulp.watch(htmlSources, ["copyhtml"]) 
 
    gulp.watch(imgSources, ["processimages"]) 
 
    gulp.watch(imgDest, ["reload"]) 
 
    gulp.watch("src/temp/css/styles.css", ["autoprefix"]) 
 
}); 
 

 
// serving localhost 
 
gulp.task('browser-sync', function() { 
 
    browserSync.init({ 
 
     server: ["public", "src"], 
 
     watchTask: true, 
 
     open: false, 
 
     files: ["public/*.html", "public/css/*.css", "public/js/*.*", 
 
      "public/img/**/*.*"] 
 
    }); 
 
}); 
 

 
// === production preparations: RUN SEPARATE TASKS ON DEMAND === 
 

 
// --- minify & compress HTML, CSS, JS 
 

 
// uglify JS 
 
gulp.task("compress-js", function() { 
 
    gulp.src("public/js/script.js") 
 
     .pipe(uglifyjs()) 
 
     .pipe(gulp.dest('public/js/')) 
 
}); 
 

 
// uglify CSS 
 
gulp.task('uglify-css', function() { 
 
    gulp.src('public/css/styles.css') 
 
     .pipe(uglifycss({ 
 
      "debug": true, 
 
      "uglyComments": true 
 
     })) 
 
     .pipe(gulp.dest('public/css/')); 
 
}); 
 

 
// compress HTML 
 
gulp.task('compress-html', function() { 
 
    return gulp.src('src/html/*.html') 
 
     .pipe(htmlmin({ 
 
      collapseWhitespace: true, 
 
      removeComments: true 
 
     })) 
 
     .pipe(gulp.dest('public/')); 
 
}); 
 

 

 
// --- lint HTML and validate CSS 
 

 
// lint html 
 
gulp.task('lint-html', function() { 
 
    gulp.src("public/*.html") 
 
     .pipe(htmlhint()) 
 
     .pipe(htmlhint.reporter()) 
 
}); 
 

 
// validate html 
 
// Option format set to html 
 
gulp.task('validate-html', function() { 
 
    gulp.src('public/*.html') 
 
     .pipe(htmlv({ 
 
      format: 'html' 
 
     })) 
 
     .pipe(gulp.dest('src/temp/validation/')); 
 
}); 
 

 
// add css validation 
 
gulp.task('validate-css', function() { 
 
    gulp.src('public/css/*.css') 
 
     .pipe(validatecss()) 
 
     .pipe(gulp.dest('src/temp/validation/')); 
 
}); 
 

 

 
gulp.task("validate", ["validate-html", "validate-css", "lint-html"]); 
 

 
gulp.task("compress", ["compress-js", "uglify-css", "compress-html"]); 
 

 
gulp.task("default", ["watch", "browser-sync"]); 
 

 
// =======================