Gulp的简单使用

我比较喜欢使用Gulp，因为简单好用！

今天的任务是：使用Gulp来压缩 jQuery源码，各输出一个压缩的和未压缩的版本

第一步：安装

cnpm install  gulp --save-dev 
cnpm install gulp-rename gulp-uglify --save-dev

 

第二步：

mkdir Gulp-demo && cd Gulp-demo
cnpm init -y

 

我的目录结构如下：

  webpack-demo
  |- package.json
  |- /build
    |- 无（压缩后的文件将被放在这）
  |- /src
    |- jquery-3.3.1.js （原文件，待操作文件）

 

第三步：编辑

gulpfile.js文件，此文件配置Gulp的行为，就是我想让Gulp去帮我干什么事情，每件事情以 task（任务）为基本单位

gulpfile.js

 

'use strict';

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

var DEST = 'build/';

gulp.task('default', function() {
  return gulp.src('./src/jquery-3.3.1.js')
    // 这会输出一个未压缩过的版本
    .pipe(gulp.dest(DEST)) //传入输出路径并输出文件
    
    // 这会输出一个压缩过的并且重命名未 foo.min.js 的文件
    .pipe(uglify()) //执行压缩
    .pipe(rename({ extname: '.min.js' })) //修改文件名为min.js，以示区分
    .pipe(gulp.dest(DEST)); //传入输出路径并输出文件
});

 

成功啦！