![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Gulp
Gulp的学习与总结
蓝色清晨_
不经一番寒彻骨,怎得梅花扑鼻香。
展开
-
gulp插件- 自动刷新(gulp-connect)
安装:npm install --save-dev gulp@3.9.0npm install --save-dev gulp-connect作用:当代码变化时,它可以帮我们自动刷新页面。使用:var gulp =require("gulp");var connect = require('gulp-connect');// 创建实时更新服务gulp.task('server', function () { connect.server({ root:"s原创 2020-06-10 15:22:48 · 445 阅读 · 0 评论 -
gulp插件-less和sass编译(gulp-less,gulp-sass)
安装:npm install --save-dev gulp-less作用:编译less文件使用:const gulp = require('gulp'), less = require("gulp-less");gulp.task("less",()=>{ gulp.src("./src/css/b.less") //要编译的 less 文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest("di原创 2020-06-10 10:44:38 · 294 阅读 · 0 评论 -
gulp插件-文件合并插件(gulp-concat)
安装:npm install –save-dev gulp-jshint作用:js代码检查使用:const gulp = require('gulp'), minifyHtml = require("gulp-minify-html");gulp.task("minifyHtml",()=>{ gulp.src("./src/html/*.html") //要压缩的 html 文件 .pipe(minifyHtml()) .pipe原创 2020-06-10 09:58:48 · 498 阅读 · 0 评论 -
gulp插件-html压缩插件(gulp-minify-html)
安装:npm install –save-dev gulp-minify-html作用:压缩html文件使用:const gulp = require('gulp'), minifyHtml = require("gulp-minify-html");gulp.task("minifyHtml",()=>{ gulp.src("./src/html/*.html") //要压缩的 html 文件 .pipe(minifyHtml())原创 2020-06-10 09:45:01 · 949 阅读 · 0 评论 -
gulp插件-css压缩插件(gulp-clean-css)
安装:npm install --save-dev -gulp-clean-css作用:压缩css文件使用:const gulp = require('gulp'), minifyCss = require("gulp-clean-css");gulp.task("minifyCss",()=>{ gulp.src("./src/css/*.css") //要压缩的 css 文件 .pipe(minifyCss()) .pipe(g原创 2020-06-10 09:36:22 · 287 阅读 · 0 评论 -
gulp插件-js压缩插件(gulp-uglify)
安装:npm install --save-dev gulp-uglify作用:用来压缩 js 文件,使用的是uglify引擎使用:const gulp = require('gulp'), uglify = require("gulp-uglify");gulp.task("minify-js",()=>{ gulp.src("./src/js/*.js") // 要压缩的 js 文件 .pipe(uglify()) // 使用uglify进行压原创 2020-06-10 09:19:44 · 459 阅读 · 0 评论 -
gulp插件-重命名插件
重命名插件使用:gulp-rename安装:npm install --save-dev gulp-rename用来重命名文件流中的文件。用 gulp.dest() 方法写入文件时,文件名使用的是文件流中的文件名,那可以在之前用 gulp-rename 插件来改变文件流中的文件名。var gulp = require('gulp'), rename = require('gulp-rename'), uglify = require("gulp-uglify"); gulp.ta原创 2020-06-10 09:05:33 · 326 阅读 · 0 评论 -
gulp插件-自动加载插件
gulp的插件数量虽然没有grunt那么多,但也可以说是应有尽有了,下面列举一些gulp常用的插件。自动加载插件:使用gulp-load-plugins安装: npm install --save-dev gulp-load-plugins要使用gulp的插件,首先得用 require 来把插件加载进来,如果我们要使用的插件非常多,那我们的 gulpfile.js 文件开头可能就会是这样子的:var gulp = require('gulp'),//一些gulp插件,abcd这些命令只是用来举原创 2020-06-10 09:05:01 · 241 阅读 · 0 评论 -
6.gulp.watch()
gulp.watch()用来监视文件的变换,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。其语法为:gulp.watch(glob[,opts],tasks);glob为要监视的文件匹配模式,规则和用法与gulp.src()方法中的glob相同opts为一个可选的配置对象,通常不需要用到。tasks为文件变化后要执行的任务,为一个数组。var gulp = require('gulp');gulp.task('uglify',()=>{ //do somethi原创 2020-06-09 13:50:08 · 613 阅读 · 0 评论 -
5.gulp.dest()
gulp.dest()方法是用来写文件的,其语法是:gulp.dest(path[,options]);path为写入文件的路径;options为一个可选的对象,通常我们不需要用到;要想使用好gulp.dest()这个方法,就要理解给它传入的路径参数与最终生成的文件的关系。gulp的使用流程一般是这样的:首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到gulp的插件中, 最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中,gulp原创 2020-06-09 11:38:04 · 304 阅读 · 0 评论 -
4.gulp.task()
gulp.task()用来定义任务,内部使用的是Orchestrator.任务task任务分为两种,**public(公开的)**或者 **private(私有的)**类型的。公开任务:从gulpfile中被导出export,可以通过gulp命令直接调用私有任务:被设计为在内部使用,通常作为series()或parallel()组合的组成部分。gulp.task(name[, deps], fn)name : 为任务名deps :当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所原创 2020-06-09 10:54:31 · 532 阅读 · 0 评论 -
3.gulp.src()
src(),创建一个流,用于从文件系统中读取Vinyl对象(Vinyl是描述文件的元数据对象,主要属性是文件系统中文件核心的 path 和 content 核心方面。Vinyl对象可用于描述来自多个源的文件)。用法:const { src,dest} = require("gulp");function copy() { return src('input/*.js') .pipe(dest('output/'))}exports.copy = copy;函数原型:s原创 2020-06-08 15:02:16 · 343 阅读 · 0 评论 -
2.Gulpfile 详解
Gulpfile 详解Gulpfile文件是项目目录下名为 gulpfile.js (或者Gulpfile.js)的文件,在运行 gulp 命令时会被自动加载。在这个文件中,你会经常看到 src()、dest()、series() 或 paralles()函数之类的 gulp API,除此之外,纯 js 代码或者 node 模块也会被使用。任何导出(export)的函数都将被注册到 gulp 的任务(task)系统中。此时我么的文件目录...原创 2020-06-08 13:33:12 · 1140 阅读 · 0 评论 -
1.快速创建gulp项目
检查 node、npm 和 npx 是否正确安装:安装 gulp 命令行工具创建项目目录并进入npx mkdirp my-projectcd my-project在项目目录下创建package.json文件npm init上述目录将指引你设置项目名、版本、描述信息等。只能装gulp,作为开发时依赖npm install --save-dev gulp检查gulp版本:确保输出与下面的屏幕截图相匹配,否则可能再次执行上述步骤:...原创 2020-06-08 11:25:22 · 109 阅读 · 0 评论