gulp: css 압축, js 압축, 이미지 압축, Less 사용

A, CSS 압축
1. Nodejs 설치
2. 전역 설치gulp

npm install gulp -g

3. 프로젝트 디렉터리에gulp 설치

npm install gulp --save-dev

4、패키지를 설정합니다.json 파일은 프로젝트 디렉터리에서 실행되며, 순서대로 입력하면 됩니다

npm ini

    {

        "name":"gulp_test",/*   ,             ，    gulp，    gulp     */

        "version":"1.0.0",/*   */

        "description":"",/*  */

        "main":"index.js",

        "scripts": {

        "test":"echo \"Error:notestspecified\" && exit 1"

        },

        "author":"",/*  */

        "license":"ISC"/*      */

    }

5, 로컬 설치 css 압축 플러그인

npm install --save-dev gulp-minify-css

6, 프로젝트 루트 디렉터리 생성gulpfile.js 파일

    //    gulp

    var gulp = require('gulp')

    //    minify-css   （     CSS）

    var minifyCSS = require('gulp-minify-css')

    //    css   

    //        gulp css      

    gulp.task('css', function () {

    // 1.     

    gulp.src('css/*.css')

    // 2.     

    .pipe(minifyCSS())

    // 3.        

    .pipe(gulp.dest('dist/css'))

    })

    //        gulp auto      

    gulp.task('auto', function () {

    //       ，          css   

    gulp.watch('css/*.css', ['css'])

    });

    //    gulp.task('default')       

    //        gulp    css     auto   

    gulp.task('default', ['css', 'auto'])

7、gulp 실행 결과 보기
직접 명령줄에서gulp를 실행하고 감청을 종료하려면 ctrl+c를 누르십시오
B, 이미지 압축 1, 이미지 압축 플러그인 설치

npm install gulp-imagemin –save-dev
npm install imagemin-pngquant –save-dev

2、gulpfile을 설정합니다.js
이gulpt 이미지 압축 참고할 수 있어요.
깊이 압축

var gulp = require('gulp'),

imagemin = require('gulp-imagemin'), //       

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')); 
});

실행자 추가

gulp.task('default',function(){ gulp.start('css','Imagemin'); });

C、Less
이 문장을 참고하여gulp-less
문자열 일치
D, JS 병합 압축 1, 병합 설치 플러그인

npm install gulp-concat --save-dev

gulpfile을 편집합니다.js

var gp = require('gulp');
var concat = require('gulp-concat');

gp.task("taskName",function(){
    //  1.js 2.js   main.js，   dest/js   
    gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(gp.dest('./dest/js'));
})

명령행 실행

gulp taskName

2. 압축

npm install gulp-uglify --save-dev

var gp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gp.task("taskName",function(){
    //  1.js 2.js     main.js，   dest/js   
    gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(uglify()).pipe(gp.dest('./dest/js'));
})

gulp가 프로젝트에서 생성한 파일을 새 프로젝트로 직접 복사하면 설치하지 않고 프로젝트 디렉터리에서 실행하면 됩니다.