gulp 튜 토리 얼 의 gulp - imagemin 압축 사진

프로필: gulp - imagemin 압축 이미지 파일 (PNG, JPEG, GIF, SVG 이미지 포함) 을 사용 합 니 다. 많은 사람들 이 gulp - imagemin 을 설치 하 는 데 오류 가 발생 할 수 있 습 니 다. 저도 많은 자 료 를 찾 아 봤 는데 그 이 유 를 모 르 겠 습 니 다. 제 방법 은 잘못 되 었 다가 다시 설치 하 는 것 입 니 다. 문제 의 소 재 를 알 고 있다 면 꼭 알려 주세요!1. nodejs / 전역 설치 gulp / 로 컬 설치 gulp / package. json 과 gulpfile. js 파일 을 만 듭 니 다. 이 예제 디 렉 터 리 구 조 는 다음 과 같 습 니 다. 2. 로 컬 설치 gulp - imagemin 2.1, github:https://github.com/sindresorhus/gulp-imagemin 2.2, 설치: 명령 프롬프트 실행 cnpm install gulp - imagemin – save - dev 2.3,메모: cnpm 가 설치 되 어 있 지 않 습 니 다. npm install gulp - imagemin – save - dev 2.4, 설명: – save - dev 설정 정 보 를 package. json 의 devDependencies 노드 에 저장 하 십시오.3. gulpfile. js 3.1 설정, 기본 사용

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});

3.2 gulp - imagemin 기타 매개 변수

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //  ：Number    ：3      ：0-7（    ）
            progressive: true, //  ：Boolean   ：false     jpg  
            interlaced: true, //  ：Boolean   ：false     gif    
            multipass: true //  ：Boolean   ：false     svg      
        }))
        .pipe(gulp.dest('dist/img'));
});

3.3 깊이 압축 이미지

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    //       imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
    pngquant = require('imagemin-pngquant');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//    svg viewbox  
            use: [pngquant()] //  pngquant    png   imagemin  
        }))
        .pipe(gulp.dest('dist/img'));
});

3.3 수 정 된 그림 만 압축 한다.그림 을 압축 하 는 데 시간 이 많이 걸 립 니 다. 많은 경우 에 우 리 는 일부 그림 만 수 정 했 습 니 다. 모든 그림 을 압축 할 필요 가 없습니다. 'gulp - cache' 를 사용 하여 수 정 된 그림 만 압축 하고 수정 되 지 않 은 그림 은 캐 시 파일 에서 직접 읽 습 니 다 (C: \ Users \ Administrator \ AppData \ Local \ Temp \ \ gulp - cache).

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    //       gulp-cache [cnpm install gulp-cache --save-dev]
    cache = require('gulp-cache');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

4. 작업 수행 4.1, 명령 프롬프트 실행: gulp testImagemin
본문 참고:http://www.ydcss.com/archives/26