gulp入门---js等文件的压缩以及将es6代码转成es5

最开始，固然要先安装node和npm，而后新建本身的项目（ps：项目名不能是‘gulp’），
而后初始化一下：
npm init -y
生成packge.json

---

首先咱们来看一下项目的目录结构：

如图：
目录css、images、js都是你项目本来的文件目录
而dist目录以及目录下的css、images、js目录就是将文件压缩后存放到的相应目标目录
接下来，就能够进入正题了

---

安装gulp

在你的项目目录下打开命令行界面
首先要全局安装一下gulp，输入：
npm i -g gulp
而后，要把gulp安装到本地：
npm i -D gulp

---

编写gulpfile.js文件

首先在项目目录下新建一个gulpfile.js文件：

导包

引入所须要的包：

var gulp = require('gulp');
var uglify = require('gulp-uglify');   ////用于压缩js文件
var minifyCSS = require('gulp-minify-css');   ////用于压缩css文件
var imagemin = require('gulp-imagemin');   ////用于压缩image文件

gulp-uglify、gulp-minify-css、gulp-imagemin须要在本地安装一下，
同理在项目目录下打开命令行界面，输入相应命令：
npm i -D gulp-uglify
npm i -D gulp-minify-css
npm i -D gulp-imagemin
安装成功后，继续在gulpfile.js中写代码：

新建压缩任务

/////新建一个‘script’任务   /////用于压缩js文件
gulp.task('script',function(){
    /////找到须要压缩的文件
    gulp.src('js/**/*.js')   ////  /**/  表示js目录下的任意层级的目录
    /////压缩文件
    .pipe(uglify())
    /////另存压缩后文件
    .pipe(gulp.dest('dist/js'));
});

同理，也能够新建压缩css、images文件的任务：

gulp.task('css',function(){
    gulp.src('css/**/*.css')
    .pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('images',function(){
    gulp.src('images/**/*.*')
    .pipe(imagemin({progressive:true}))
    .pipe(gulp.dest('dist/images'));
});

---

到此，压缩的任务就完成了，在命令行界面能够输入 ‘gulp’ 空格 任务名称 来执行压缩，例如：
gulp script
执行完成后，在dist目录的相应目录下能够找到压缩后的文件

自动压缩任务

在默认状况下，咱们每次修改文件都要去执行压缩任务才能获得压缩后的文件，
为了方便，咱们使用watch方法来新建一个监放任务，每次修改文件，系统会自动执行压缩：

gulp.task('auto',function(){
    ////////监听文件，当文件被修改后自动执行压缩任务
    ////////第一个参数：监听的目标文件
    ///////第二个参数：监听到修改后执行的压缩任务
    gulp.watch('js/**/*.js',['script']);  
    gulp.watch('css/**/*.css',['css']);
    gulp.watch('images/**/*.*',['images']);
});

默认任务

/////////定义默认任务,使用gulp 启动数组里的全部任务
gulp.task('default',['images','css','script','auto']);

新建默认任务后，在命令行执行：
gulp
便可执行全部数组中的任务

---

将es6代码转成es5

在以上的代码基础上，继续写入代码：
首先，仍是要导包

var babel = require('gulp-babel');

同理，在本地安装：
npm i -D gulp-babel
除此以外，还要装一个包：
npm i -D babel-preset-env

装完以后，在项目根目录下新建一个 .babelrc 文件
在文件内输入：

{
  "presets": ["env"]
}

完成以后，只要在js文件压缩任务中加入.pipe(babel())就能够成功转代码了，以下：

gulp.task('script',function(){
    /////找到文件
    gulp.src('js/**/*.js')
    //////把ES6代码转成ES5代码
    .pipe(babel())
    /////压缩文件
    .pipe(uglify())
    /////另存压缩后文件
    .pipe(gulp.dest('dist/js'));
});