简单gulpfile.js写法

最新推荐文章于 2025-06-26 12:47:47 发布

原创最新推荐文章于 2025-06-26 12:47:47 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gulp #javascript #前端

前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用Gulp实现的自动化构建流程，包括LESS编译压缩、JS文件合并压缩混淆、图片资源复制及HTML文件压缩等功能，并实现了文件更改后的自动刷新。

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

主要实现功能如下：

gulpfile简单实现less自动编译、合并、压缩。
js自动合并、压缩。
源文件目录下图片自动拷贝到目标目录。
html源码压缩
源码更改后自动完成以上步骤并刷新页面

以下为文件源码：

'use strict';
/**
 * 1. LESS编译 压缩 合并
 * 2. JS合并 压缩 混淆
 * 3. img复制
 * 4. html压缩
 */


// 在gulpfile中先载入gulp包，因为这个包提供了一些API
var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');


// 1. LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包
gulp.task('style', function() {
  // 这里是在执行style任务时自动执行的
  gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.reload({
      stream: true
    }));
});


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


// 2. JS合并 压缩混淆
gulp.task('script', function() {
  gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }));
});


// 3. 图片复制
gulp.task('image', function() {
  gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
      stream: true
    }));
});


var htmlmin = require('gulp-htmlmin');
// 4. HTML
gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
      stream: true
    }));
});


var browserSync = require('browser-sync');
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: ['dist']
    },
  }, function(err, bs) {
    console.log(bs.options.getIn(["urls", "local"]));
  });


  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
});