28gulp

Posted 2020-12-02 zhongchao666

一.gulp的作用?

1.gulp-sass : 编译sass
2.gulp-rename : 重命名
3.gulp-cssnano : 压缩css
4.gulp-concat : 合并文件
5.gulp-uglify : 压缩js
6.gulp-babel : 将ES6转为ES5

二.如何使用gulp?

1.全局安装gulp:  cnpm install -g gulp
2.在项目根目录下初始化package.json :  cnpm init -y
3.在项目根目录下局部安装gulp : cnpm install --save-dev gulp
4.在项目根目录下局部安装所需插件 : cnpm install --save-dev 插件 
5.在项目根目录下创建gulp的配置文件: gulpfile.js

三.gulpAPI

1. gulp.src() : 找到需要处理的文件URL
2. gulp.dest(): 将处理后的文件放置目标目录的URL
3. gulp.task(): 创建并发布任务
4. gulp.watch() : 监听任务
5.连接方法的方法: pipe()

四.配置gulpfile.js文件

1.通过require()将所需的插件引入配置文件中
2.创建并发布任务
 gulp.task("任务名",function(){
    gulp.src("入口文件URL").pipe(调用插件()).pipe(gulp.dest(‘出口文件路径‘));
 })
 //监听任务
 gulp.task(‘任务名‘,function(){
    gulp.watch([‘监听的源文件‘],[‘对应的任务名‘])
 })
3.运行gulp任务  gulp 任务名

gulpfile.js

//导入所需插件
const gulp = require(‘gulp‘); //导入gulp
const rename = require(‘gulp-rename‘); //重命名
const concat = require(‘gulp-concat‘);  //合并文件
const uglify = require(‘gulp-uglify‘); //压缩js
//创建并发布任务
gulp.task("hello",function(){
    console.log(‘hello world‘);
})
gulp.task(‘concatJS‘,function(){
    gulp.src("src/js/*.js").pipe(concat("main.js")).pipe(rename({"suffix" : ".min"})).pipe(uglify()).pipe(gulp.dest(‘dist‘));
})
//发布监听任务
gulp.task(‘default‘,function(){
    gulp.watch([‘src/js/*.js‘],[‘concatJS‘]);
    
})

五.配置gulp-babel(将ES6转为ES5)

1.在项目根目录下: cnpm install --save-dev gulp-babel babel-core babel-preset-env
2.配置gulpfile.js
var gulp = require(‘gulp‘);
var babel = require(‘gulp-babel‘);
gulp.task("babel",function(){
    gulp.src(‘源文件的URL‘).pipe(babel({"presets" : ["env"]})).pipe(gulp.dest(‘目标路径‘));
})

六.ES6模块化

1. export  :导出模块
2. import  : 导入模块
3.导出模块的几种写法
    1> 先创建模块,最后导出模块
    
    export {模块1,模块2,模块3,……}
    
    导入: import {模块1,模块2,模块3,……} from "导入模块的路径"
    2> 利用别名导出 as
    export {原名 as 别名,原名 as 别名}
    
    导入: import {模块1,模块2,模块3,……} from "导入模块的路径"
    3> 边创建模块,边导出
    export 模块1;
    export 模块 2;
    ……
    
    导入: import {模块1,模块2,模块3,……} from "导入模块的路径"
    4> 匿名导出模块(只能有一个模块)
    export default 模块
    
    导入 : import 自定义一个名字 from "导入模块的路径"

    var gulp = require(‘gulp‘),
        babel = require(‘gulp-babel‘);
    gulp.task(‘babel‘,function(){
        gulp.src(‘./src/js/*.js‘).pipe(babel({
            presets : [‘es2015‘]
        })).pipe(gulp.dest(‘src/js/es5‘));
    })