gulp的配置及使用

gulp 自动化工具

安装

全局安装

npm install gulp -g

局部安装创建依赖、本地安装

npm install gulp –save-dev

请求模块

var gulp = require(‘gulp’);

设置导入文件

以es6编译成es5为例

gulp.src(‘xx.js’);

安装babel(es6转es5)

在我们需要的本地情况下,局部安装
npm install –save-dev babel-preset-es2015

设置管道流 流向babel

例子:
将es6编译成es5
.pipe(babel({
//es2015即es6格式
presets: [‘es2015’]
}))

//将编译好的文件流向dist文件夹
.pipe(gulp.dest('dist'))

例子:
合并文件
本地安装 npm install gulp-concat –save-dev
const gulp = require(‘gulp’);
const concat = require(‘gulp-concat’);
gulp.task(‘scripts’,function(){
gulp.src(js/.js)
//将js文件夹下的所有js文件合并,”
“代表所有
.pipe(concat(‘common.js’))
//合并到common.js文件里
.pipe(gulp.dest(dist));
//把生成的common.js文件存放到dist里
})

gulp.task('default',['scripts']);
       //default入口,执行'scripts'事件(个人理解)

—-压缩js、css、image以此为例

坚持原创技术分享,您的支持将鼓励我继续创作!