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

葉無聞 2019-06-25

最开始,当然要先安装node和npm,然后新建自己的项目(ps:项目名不能是‘gulp’),
然后初始化一下:
npm init -y
生成packge.json


首先我们来看一下项目的目录结构:
gulp入门---js等文件的压缩以及将es6代码转成es5

如图:
目录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'));
});

相关推荐