Gulp学习使用和常用配置解析

Gulp学习和常用配置

gulp和webpack都是前端的脚手架，Gulp侧重于前端开发的 整个过程 的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。而webpack更注重的是模块打包，当然gulp中的绝大部功能webpack也可以实现，他们的侧重点不同，就不说哪一个好，而从上手来说，gulp可能会相对比较简单一点，如果想学习webpack的话 也可以参考下我之前写的2篇博客！
 
带你由浅入深探索webpack4（一）
带你由浅入深探索webpack4（二）
 

Gulp的安装和使用

首先，我们需要安装node,这个就不做介绍了 ，直接在官网上下载傻瓜式安装就好了！接着我们用npm命令全局安装下gulp.

npm install -g gulp

接着，我们进入到目录文件夹，初始化环境

npm init -y

然后，我们可以正式在该目录中安装gulp了

npm install --save-dev gulp

我们先在主目录下创建一个gulp的配置文件gulpfile.js

var gulp = require('gulp');
gulp.task('default',function(){
    //默认执行的代码
    console.log('hello world!');
}

现在我们可以在控制台下运行gulp了

$  gulp

 

常用配置解析

首先我们先从最简单的配置开始

var gulp = require('gulp');
gulp.task('default',function(){
    //默认执行的代码
    console.log('hello world!');
}

首先我们用require导入了gulp模块
gulp.task(name,function());
这个简单来说其实就是当我们运行gulp name的时候，执行后面的function函数的意思啦！
不过有2个比较特殊的name要注意一下就是watch 和default.
default是默认配置执行事件、而watch是监控事件（这个后面再介绍）

我们再来看一个简单

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

// html文件
gulp.task('html', function() {
    gulp.src('./src/*.html')
        .pipe(connect.reload())
        .pipe(gulp.dest('./dist'));
});

这个例子其实很简单，就是当我们在命令行运行gulp html时实现页面的刷新！
gulp.src就是该事件的入口文件，.pipe就是下个操作的意思
gulp.dest就是输出该文件到指定路径（如果该文件存在则覆盖原文件）

gulp.task('default', ['connect', 'watch', 'js', 'less']);

这行代码的意思就是默认又右往左执行事件.(既先gulp less然后再gulp js一直向左执行)
 
gulp核心思想其实就是这么简单。

 

配置服务

当然如果不想手动刷新代码的话可以配置一下服务

gulp.task('connect', function() {
    connect.server({
        root: 'dist',
        livereload: true,
        port: 9000,
    middleware: function(connect, opt) {
           return [
                proxy('/printbox',  {
                    target: 'http://172.20.8.30:8891',
                    changeOrigin:true
               })
           ]
       }
    });
});

 
里面的参数和webpack有点类似。
root：项目的路径 liverload：是否热加载 port：监听端口
middleware也可以不用配置，这是简单的代理转发请求作用，处理跨域的方法很多，一般我都是用nginx这个比较方便简单，还能处理负载均衡问题，可以参考下我之前写的博客

配置Nginx实现反向代理

 

gulp.watch

gulp.wathch只是就是监听文件是否发生变化,看下面的例子

gulp.task("watch", function () {
    gulp.watch("src/js/*js", ['scripts']) 
    gulp.watch("src/image/*", ['imagemin'])
    gulp.watch("src/sass/*.scss", ['sass'])
    gulp.watch("src/*.html",['copyHtml'])
})
//监听那个文件发生变化，后面就执行什么方法

例如当html文件发现改变时，就会触发copyHtml事件（既运行gulp copyHtml）.

用法总结

gulp.task – 定义任务
gulp.src – 找到需要执行任务的文件
gulp.dest – 执行任务的文件的出口
gulp.watch – 观察文件是否发生变化

 

常用插件

其插件的用法都是大同小异，因为有点多就不一一介绍，可以参考下面的文章自己去查
glup常用插件介绍

常用配置

var gulp = require('gulp');
var connect = require('gulp-connect');
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var cleanCss = require('gulp-clean-css');
var autoprefixer = require('autoprefixer');
var postCss = require('gulp-postcss');
var proxy = require('http-proxy-middleware');

// 起服务
gulp.task('connect', function() {
    connect.server({
        root: 'dist',
        livereload: true,
        port: 9000,
    middleware: function(connect, opt) {
           return [
                proxy('/printbox',  {
                    target: 'http://172.20.8.30:8891',
                    changeOrigin:true
               })
           ]
       }
    });
});

// html文件
gulp.task('html', function() {
    gulp.src('./src/*.html')
        .pipe(connect.reload())
        .pipe(gulp.dest('./dist'));
});

// css文件
gulp.task('less', ['html'], function() {
    gulp.src('./src/css/*.less')
        .pipe(less())
        .pipe(postCss([autoprefixer({browsers: ['last 2 versions']})]))
        .pipe(gulp.dest('./dist/css'))
        .pipe(cleanCss())
        .pipe(rename({extname: '.min.css'}))
    .pipe(connect.reload())
        .pipe(gulp.dest('./dist/css/min'))
});

// js文件
gulp.task('js',['html'] , function () {
    gulp.src('./src/js/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(gulp.dest('./dist/js'))
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
    .pipe(sourcemaps.write())
    .pipe(connect.reload())
        .pipe(gulp.dest('./dist/js/min'))
});

// 图片
gulp.task('img', function () {
    gulp.src('./src/img/*.*')
    .pipe(connect.reload())
        .pipe(gulp.dest('./dist'));
})

// 监控
gulp.task('watch', function() {
    gulp.watch(['./src/*.html'], ['html']);

    gulp.watch(['./src/js/*.js'], ['js']);

    gulp.watch(['./src/css/*.less'], ['less']);
});

// 默认任务
gulp.task('default', ['connect', 'watch', 'js', 'less']);