葉無聞 2019-06-25
最开始,当然要先安装node和npm,然后新建自己的项目(ps:项目名不能是‘gulp’),
然后初始化一下:
npm init -y
生成packge.json
首先我们来看一下项目的目录结构:
如图: 目录css、images、js都是你项目原本的文件目录 而dist目录以及目录下的css、images、js目录就是将文件压缩后存放到的相应目标目录 接下来,就可以进入正题了
在你的项目目录下打开命令行界面
首先要全局安装一下gulp,输入:
npm i -g gulp
然后,要把gulp安装到本地:
npm i -D gulp
首先在项目目录下新建一个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
即可执行所有数组中的任务
在以上的代码基础上,继续写入代码:
首先,还是要导包
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')); });