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)); //传入输出路径并输出文件
});

 

成功啦！