gulp-白红宇

gulp

阅读量：3925 次

发布时间：2019-05-23

本文共 4152 字，大约阅读时间需要 13 分钟。

一.gulp概述：

用自动化构建工具增强你的工作流程！ (三阶段有一个比gulp更好的 --webpcak)

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

基于node强大的流(stream)能力，gulp在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。

二.gulp的功能(根据功能安装对应的包或者模块)

文件复制

html压缩 css编译压缩 js合并压缩

优化图片-压缩图片

编译sass

es6转换es5
… …

三.安装gulp

安装node–利用node下面npm进行模块安装

全局安装gulp： npm i gulp -g (只装一次，任意目录安装，作用于整个环境)

作为项目的依赖安装，一定要安装到你项目的根目录下面 npm i gulp -D (项目目录下面，每个项目下面都需要)确定此项目你用了那些包。

四.项目初始化–npm init -y

gulp插件安装（编译/压缩/合并/即时刷新等）

gulp-concat：合并js

gulp-watch：监听任务

gulp-uglify：压缩js

gulp-rename：重命名

gulp-imagemin：图片压缩

gulp-sass : sass编译插件

gulp-minify-html：压缩html

gulp-minify-css：压缩css

package.json文件----npm init配置文件package.json

注意：pm init 时，用户需回答一些问题，然后在当前目录生成一个基本的package.json文件。package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

npm install命令根据package.json配置文件，自动下载所需的模块，就是置项目所需的运行和开发环境。

devDependencies 里面的插件只用于开发环境 --save-dev 或者 -D

dependencies 是需要发布到生产环境的，且生产环境是真实的环境。 -save 或者 -S

package.json文件的解释

gulp下面常用的方法

gulp.task : 执行gulp任务

gulp.run : 执行

pipe : 管道流

gulp.series（要执行的任务的名字，需要执行的函数）：用于串行（顺序）执行

gulp.parallel（要执行的任务的名字，需要执行的函数）：用于并行执行

应用:

注意:在自己项目文件夹下创建一个gulpfile.js文件在文件里面应用，应用前初始化项目(npm init)；控制台安装对应的插件 例如:（npm install gulp -D）

gulp.task(taskname,callback):创建任务  taskname任务名称  callback执行的回调gulp.src(url):设置引入文件的路径gulp.dest():输出文件设置(如果不存在目录名，自动生成)pipe():管道流(将任务链式连接起来)gulp 任务名   -- 执行任务。

1 .gulp复制

const gulp = require('gulp');// 引入gulp模块,生成gulp对象gulp.task('copyfile', () => {
       return gulp.src('src/fonts/*.txt') //加载文件        .pipe(gulp.dest('dist/fonts/'));//输出文件});

2.html压缩

const gulp = require('gulp');// 引入gulp模块,生成gulp对象const html = require('gulp-minify-html');//压缩html的插件gulp.task('uglifyhtml', () => {
       return gulp.src('src/html/*.html')        .pipe(html())//执行压缩        .pipe(gulp.dest('dist/html/'));});

3.压缩css

const gulp = require('gulp');// 引入gulp模块,生成gulp对象const css = require('gulp-minify-css');//压缩css的插件gulp.task('uglifycss', () => {
       return gulp.src('src/style/*.css')        .pipe(css())//执行压缩        .pipe(gulp.dest('dist/style/'));});

4.压缩js

const gulp = require('gulp');// 引入gulp模块,生成gulp对象const script = require('gulp-uglify');//压缩js的插件//es6转es5的三个模块//gulp-babel@7   babel-core       babel-preset-es2015const babel = require('gulp-babel');//主要const babelcore = require('babel-core');const es2015 = require('babel-preset-es2015');gulp.task('uglifyjs', () => {
       return gulp.src('src/script/*.js')        .pipe(babel({
   //先将es6转换成es5            presets: ['es2015']//es2015->es6  es2016->es7...        }))        .pipe(script())//再执行压缩        .pipe(gulp.dest('dist/script/'));});

5.编译sass,同时生成.map文件(.map调式文件)

// gulp - sass gulp - sourcemaps gulp - load - plugins

//sass编译const gulp = require('gulp');// 引入gulp模块,生成gulp对象//gulp-sass gulp-sourcemaps gulp-load-plugins const sass = require('gulp-sass');//引入生成.map文件模块const sourcemaps = require('gulp-sourcemaps');//生成.map文件const plugins = require('gulp-load-plugins')();//返回的是一个函数体。需要再次执行。gulp.task('compilesass', () => {
       return gulp.src('src/sass/*.scss')        //初始化gulp-sourcemaps插件        .pipe(plugins.sourcemaps.init())        .pipe(plugins.sass({
               outputStyle: 'compressed'        }))        //通过sourcemaps,生成.map文件        .pipe(plugins.sourcemaps.write('.'))        .pipe(gulp.dest('dist/sass/'));});

6.图片压缩插件-imagemin@6

const gulp = require('gulp');// 引入gulp模块,生成gulp对象const imagemin = require('gulp-imagemin');//对png最大的压缩，其他的格式几乎压不动。gulp.task('uglifyimg', () => {
       return gulp.src('src/img/*.{png,gif,jpg,ico}')        .pipe(imagemin())//执行压缩        .pipe(gulp.dest('dist/img/'));});//注意事项：gulp操作后的路径对应操作前的路径。

7.监听插件-gulp-watch()

参2:通过gulp.parallel()并行监听任务名。

监听上面的任务，监听之前任务必须先跑一次。再进行监听。

//任务名为default,直接gulp运行，默认任务名。const gulp = require('gulp');// 引入gulp模块,生成gulp对象const watch = require('gulp-watch');//gulp-watch监听模块gulp.task('default', function () {
       watch(['src/html/*.html', 'src/style/*.css', 'src/script/*.js', 'src/img/*.{png,gif,jpg,ico}']  , gulp.parallel('uglifyhtml', 'uglifycss', 'uglifyjs', 'uglifyimg'));});

综合应用：