gulp常用插件及方法

╰+哭是因爲堅強的太久メ 2022-06-01 13:24 206阅读 0赞

常用的几个插件

gulp-uglify //（JS压缩）
    gulp-minify-css //（CSS压缩）
    gulp-minify-html    //（html压缩）
    gulp-concat //（文件合并）
    gulp-less   //（编译Less）
    gulp-sass   //（编译Sass）
    gulp-imagemin   //（压缩图片）
    gulp-livereload //（自动刷新）
    gulp-rename //(重命名)

方法

//gulpfile.js
    //引入需要的插件
    var gulp = require('gulp'),
        uglify = require('gulp-uglify'),
        minify = require('gulp-minify-css'),
        htmlmini = require('gulp-minify-html'),
        concat = require("gulp-concat"),
        less = require("gulp-less"),
        sass = require("gulp-sass"),
        imagemin = require('gulp-imagemin'),
        livereload = require('gulp-livereload'),
        rename = require("gulp-rename");

建立任务

js压缩

gulp.task('minJs', function () { 
        gulp.src(['js/*.js','!js/*.min.js'])  //获取文件，同时排除.min.js文件
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' })) //重命名 会在输出的文件名字后面加.min
            .pipe(gulp.dest('dest/js'));  //输出文件
    });
    //注： ' ！' 为排除模式;

css压缩

gulp.task('cssMin', function () { 
        gulp.src(['css/*.css', '!css/*.min.css'])  //要压缩的css
            .pipe(minify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest('dest/css'));
    });

html压缩

gulp.task('htmlMin', function () { 
        gulp.src('*.html')
            .pipe(htmlmini())
            .pipe(gulp.dest('minihtml'));
    })

文件合并

gulp.task('concat', function () { 
        gulp.src('js/*.js')  //要合并的文件
        .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
        .pipe(gulp.dest('dest/js'));
    });
    注：按顺序合并文件 gulp.src(['js/demo1.js','js/demo2.js','js/demo2.js'])；

less编译

gulp.task('lessTran', function () { 
        gulp.src('less/*.less')
        .pipe(less())
        .pipe(rename('newindex.css'))//重命名
        .pipe(gulp.dest('dest/css'));
    });

sass编译

gulp.task('sassTran', function () { 
        gulp.src('sass/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('dest/css'));
    });

压缩图片

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

监听

gulp.task('watch', function() { 
      livereload.listen(); //调用listen()方法
      //监听目录下的文件。
      gulp.watch('js/*.js', ['jsMin']);
      gulp.watch('css/*.css', ['cssMin']); 
      //..................
    });

gulp默认执行任务

gulp.task('default',[],function(){ 
         gulp.start('watch');
    });

以上仅为一些简单常用的gulp任务