gulp的gulpfile.js文件配置

最新推荐文章于 2025-07-28 15:28:11 发布

原创最新推荐文章于 2025-07-28 15:28:11 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一个使用Gulp实现的自动化构建流程，包括压缩CSS、JS文件，编译Less样式表以及图片压缩等操作。通过定义不同的Gulp任务，可以轻松实现资源文件的管理和优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    less = require('gulp-less'),
    del = require('del');

// 编译less
// 在命令行输入 gulp images 启动此任务
gulp.task('less', function () {
    gulp.src('./less/**.less') // 1. 找到 less 文件
        .pipe(less()) // 2. 编译为css
        .pipe(gulp.dest('./less/1/'))   // 3. 另存文件
});
//压缩css
gulp.task('minify_css',["clean"], function () {
    var cssSrc = ['./css/*.css'];

    return gulp.src(cssSrc)      //压缩的文件
        .pipe(concat('all.css'))    //合并所有css到all.css
        .pipe(gulp.dest('./main/css'))   //输出文件夹
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./main/css')); //执行压缩
});
//图片
gulp.task('gulp-imagemin',["clean"], function () {
    return  gulp.src('./images/*')      //压缩的文件
         .pipe(imagemin())
        .pipe(gulp.dest('./images/1'))//输出文件夹
});
//压缩js
gulp.task('minify_js',["clean"], function() {
    var jsSrc = ['./lib/*.js','!./lib/*.src.js'];

    return gulp.src(jsSrc)
        .pipe(concat('all.js'))    //合并所有js到all.js
        .pipe(gulp.dest('./lib'))    //输出all.js到文件夹
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('./lib'));  //输出
});


//执行压缩前，先删除以前压缩的文件
gulp.task('clean', function() {
    return del(['./css/all.css', './css/all.min.css', './lib/all.js', './lib/all.min.js','./images/1/*','./less/1/'])
});

// 默认任务
gulp.task('default', function(){
    gulp.run('minify_css', 'minify_js','gulp-imagemin','less');
});

参考文献：1https://www.kancloud.cn/thinkphp/gulp-guide/43998 2、http://i5ting.github.io/stuq-gulp/