gulp 的入门小Demo

Posted 2020-08-14

首先需要npm安装所需的模块，我的小demo安装了以下模块

整个项目结构如下

 

接下来上代码

var gulp = require(‘gulp‘),
    imagemin = require(‘gulp-imagemin‘),
    minifycss = require(‘gulp-minify-css‘),
    uglify = require(‘gulp-uglify‘),
    rename = require(‘gulp-rename‘),
    concat = require(‘gulp-concat‘),
    clean = require(‘gulp-clean‘),
    livereload = require(‘gulp-livereload‘);

//html处理
gulp.task(‘html‘,function(){
   var htmlSrc = ‘./src/*.html‘,
       htmlDst = ‘./dist/‘;

   gulp.src(htmlSrc)
       .pipe(gulp.dest(htmlDst))
});

//css处理
gulp.task(‘css‘,function(){
   var cssSrc = ‘./src/sass/*.css‘,
       cssDst = ‘./dist/css‘;

   gulp.src(cssSrc)
       .pipe(minifycss())
       .pipe(gulp.dest(cssDst))
});

//图片处理
gulp.task(‘images‘,function(){
   var imgSrc = ‘./src/images/**/*‘,
       imgDst =  ‘./dist/images‘;

   gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});

//js处理
gulp.task(‘js‘,function(){
   var jsSrc = ‘./src/js/*.js‘,
       jsDst = ‘./dist/js‘;

   gulp.src(jsSrc)
       .pipe(concat(‘main.js‘))
       .pipe(rename({suffix:‘.min‘}))
       .pipe(uglify())
       .pipe(gulp.dest(jsDst))
});

//清空 图片样式js
gulp.task(‘clean‘,function(){
    gulp.src([‘./dist/css‘,‘./dist/js‘,‘./dist/images‘],{read:false})
        .pipe(clean());
});

//默认任务
gulp.task(‘default‘,[‘clean‘],function(){
    gulp.start(‘html‘,‘css‘,‘images‘,‘js‘)
});

执行gulp后，项目结构如下