簡體   English   中英

如何使Grunt.js imagemin跟蹤* any *文件夾,並可能將圖像存儲在一個地方?

[英]How can I make Grunt.js imagemin to track *any* folder and possibly store images in one place?

我對Grunt.js相對較新,設置非常簡單,但是現在我遇到了兩個問題:1)首先,如何跟蹤給定source文件夾中的任何文件夾? 例如,圖像文件夾本身可能包含圖像,以及包含圖像的文件夾和具有圖像的文件夾等的文件夾。2)是否可以在其主(生成)文件夾中監視圖像? 沒有任何永遠的循環...

這是我當前的配置:

module.exports = function(grunt) {
grunt.initConfig({
    jsDir: 'sources/js/',
    jsDistDir: 'public/js/',
    cssDir: 'sources/css/',
    cssDistDir: 'public/css/',
    concat: {
        js: {
            src: ['<%=jsDir%>*.js'],
            dest: '<%=jsDistDir%>javascript.js'
        },
        css: {
            src: ['<%=cssDir%>*.css'],
            dest: '<%=cssDistDir%>styles.css'
        }
    },
    min: {
        dist: {
            src: ['<%= concat.js.dest %>'],
            dest: '<%=jsDistDir%>javascript.js'
        }
    },
    cssmin: {
        dist: {
            src: ['<%= concat.css.dest %>'],
            dest: '<%=cssDistDir%>styles.css'
        }
    },
    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'sources/images/',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'public/images/'
            }]
        }
    },
    watch: {
        min: {
            files: ['<%=jsDir%>*.js'],
            tasks: ['concat:js', 'min']
        },
        cssmin: {
            files: ['<%=cssDir%>*.css'],
            tasks: ['concat:css', 'cssmin']
        },
        imagemin: {
            files: ['sources/images/**/*.{png,jpg,gif}'],
            tasks: ['imagemin']
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-yui-compressor');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', [
    'concat',
    'min',
    'cssmin',
    'imagemin',
    'watch'
]);
};

謝謝!

問題1):

表達式**/*正是這樣做的。 (請參見imagemin>動態>文件> src)。 在concat部分中,您可以執行類似src: ['<%=jsDir%>**/*.js'],

問題2):使用監視任務:

安裝: npm install grunt-contrib-watch --save-dev

--save-dev表示將依賴關系寫入package.json文件)

在Gruntfile.js中進行配置:

(function () {
    'use strict';
}());

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);  // auto load grunt tasks
    var globalConfig = {
        jsPath: 'js/',
        cssPath: 'css/',
        scssPath: 'scss/',
    };

    grunt.initConfig({
        globalConfig: globalConfig,
        pkg: grunt.file.readJSON('package.json'),

        concat: {
            // conf goes here
        },
        // your other tasks go here
        imagemin: {
            // conf goes here
        },

        watch: {
            dev:{
                files: ['<%= globalConfig.jsPath %>_*.js', '<%= globalConfig.scssPath %>**/*.scss'],
                tasks: ['concat','imagemin', 'yourothertasks']
            }
        }
    });

    grunt.registerTask('default', ['concat', 'imagemin', 'yourothertasks', 'watch:dev']);
};

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM