Gulp 自动化构建

Gulp 自动化构建

use-gulp

官网

gulp 可以做什么?

1. 编译 sass
2. 合并优化压缩 css
3. 校验压缩 js
4. 优化图片
5. 添加文件指纹（md5）
6. 组件化头部底部（include html）

7. 实时自动刷新…

   gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。

   通过各种插件, 配置任务task , 完成需要

安装

1. 全局安装

   npm install gulp -g

2. 局部安装

   npm i -D gulp

gulp的插件

这里列举比较常用的插件:

• gulp-less // less文件编译成css
• gulp-clean-css // 压缩css文件
• gulp-csso // 压缩优化css
• gulp-babel /// 将ES6代码编译成ES5。
• gulp-uglify // 压缩js文件
• gulp-imagemin // 压缩图片
• gulp-html-minify // 压缩HTML
• gulp-htmlmin // 压缩html
• gulp-filter // 在虚拟文件流中过滤文件
• gulp-concat // 合并文件
• gulp-rename // 重命名文件
• gulp-clean // 清理文件 可以用 del 替代
• gulp-notify // 当发生异常时提示错误
• gulp-plumber // 当发生异常时提示错误

比较特殊的
- gulp-load-plugins

var $ = require('gulp-load-plugins')(); $ 是一个对象,加载了依赖里的插件 通过$.xxx使用插件

• gulp-livereload // 网页自动刷新
• gulp-webserver // 本地服务器

参考网站
https://blog.csdn.net/qq_27626333/article/details/78006271

gulp插件网站
https://gulpjs.com/plugins/

gulp api

gulp.src( )

一般直接写文件路径, 通过 * 通配符来通配全部文件

gulp.dest(path[, options])

输出到文件夹 , 文件夹不存在将会自动创建

gulp.task(name[, deps], fn)

核心 , 配置一个任务 执行一连续的操作

name
任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

deps
类型： Array
一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

fn
该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

gulp.watch( )

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

// 其他写法

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

配置任务

这里以使用gulp-less文件编译less文件做例子

在项目根路径下 创建gulpfile.js 文件

var gulp = require('gulp')

// less文件编译成css
var less = require('gulp-less') 

gulp.task('lessTask', function() {

    // 链式编程 以流的形式传递数据
    gulp.src('src/less/*.less') // 找到文件
        .pipe(rename({ suffix: '.min' })) // 重命名
        .pipe(less()) // 将less文件编译成css
        .pipe(gulp.dest('dist/css')) // 输出 将会在dist/css下生成index.css
});

gulp.task('default',[ 'htmlminTask']); // 默认任务 , gulp 默认执行

可以通过 gulp lessTask 执行任务

如果在添加到默认任务中, 直接gulp执行

异步或同步执行

在task中 是否使用return来决定是异步还是同步

const gulp = require('gulp');
// 没有使用return
gulp.task('js',function () {
    gulp.src('src/js/*.js')...
})

gulp.task('css',function () {
    gulp.src('src/js/*.js')...
})

gulp.task('html',function () {
    gulp.src('src/js/*.js')...
})


gulp.task('default', ['js', 'css', 'html']); 

执行结果

上一个任务完成 才执行 下一个

然后加上return

const gulp = require('gulp');

// 使用return
gulp.task('js', function () {
    return gulp.src('src/js/*.js')
})
gulp.task('css', function () {
    return gulp.src('src/js/*.js')
})
gulp.task('html', function () {
    return gulp.src('src/js/*.js')
})

gulp.task('default', ['js', 'css', 'html']);

执行结果

结果显然是异步的

不想全部同步 , 但是个别任务是要同步顺序执行 怎么办?

// less文件转化为css文件
gulp.task('less', function () {
    return gulp.src('src/less/*.less')
        .pipe($.less())
        .pipe(gulp.dest('src/css/'))
});

// 添加前置任务 这样less任务执行完 才会执行css任务
// 执行css任务 都是自动先执行完less任务
gulp.task('css', ['less'], function () {
    return gulp.src('src/css/*.css')
        // .pipe($.concat('build.css')) // 合并成一个文件
        .pipe($.rename({suffix: ".min"}))
        .pipe($.cleanCss())
        .pipe(gulp.dest('dist/css/'))
});

gulp 自动刷新

一个自动化构建工具
怎么可以少了 watch 和自动刷新

自动刷新的插件是 gulp-livereload 本地服务器可以用 gulp-webserver 或者 gulp-connect 都可以

这里就演示用gulp-webserver和gulp-conncet

const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
// 使用 open 自动打开一个网址
const open = require('open');
gulp.task('css', function()){
    return gulp.src('src/css/*.css')
        .pipe(gulp.dest('dist/css/'))
        .pipe($.livereload())
        .pipe($.connect.reload())
}
gulp.task('server', ['default'], function () {
    $.connect.server({
        root: 'dist/',
        livereload: true,
        port: 8080
    });
    open('http://localhost:8080');
    gulp.watch('src/css/*.css', ['css']);
});

输入 gulp server 启动一下即可

这里就不演示了