Question

这是我的问题。

根据以下gruntfile.js提到的所有路径都很好（显示在grunt --verbose -v中）。每当我更改文件时，Livereload都会触发（至少--verbose显示livereload fires）。但是，只有在我更改/development/index.html（在Sublime Text中）或/less/mainpage.less（使用contrib-less）时，页面才会重新加载。

如果我更改了开发/ img / / *或者/ test / / *中的任何内容，那么livereload FIRES但不要重新加载我的页面。

如果有人可以提供帮助，我真的很感激。

这是我的文件夹结构：

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

试试这个

unput

如果您在图片文件夹中进行更改，则应重新加载。（根据您的结构自定义URL。）

Answer 2

行。在我解决了所有问题后，我只想结束。

我到达了以下可接受的工作设置：
- 如上所述：Grunt只作为“文件”工作者进行所有编译/连接/复制等。工作。
- browser-sync是我的本地服务器（具有许多其他重要功能）和快速的livereload工具，它还可以同步几个打开的测试窗口（https://browsersync.io/） - Divvy：我的工作流程的强大功能，能够动态安排桌面上的窗口（http://mizage.com/divvy/）。

Answer 3

更新：我转换到Gulp + Browsersync后不久。我不能满足。 Gulp的工作速度大约快10倍，而Browsersync也很流畅。

这是我的gulpfile.js示例，仅用于演示此对为我管理的任务：

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"]);

// =======================

livereload已触发但在目标中的contrib-copy或tinyimg生成更改时不会重新加载页面（！）

3 个答案: