//文件结构

gulpfile.js

 
 
var gulp = require('gulp');
var sass = require('gulp-sass'); //编译scss
var cleanCSS = require('gulp-clean-css');//压缩css
var gulpautoprefixer = require('gulp-autoprefixer');//自动添加前缀
var uglify = require('gulp-uglify'); //js 压缩
var gulpImagemin = require('gulp-imagemin'); //图片压缩
var browserSync = require('browser-sync').create(); //浏览器自动重载
var reload = browserSync.reload;
sass.compiler = require('node-sass');
gulp.task('scss',(cb)=>{
gulp.src('static/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulpautoprefixer())
.pipe(cleanCSS())
.pipe(gulp.dest('public'))
.pipe(reload({stream: true}))
cb();
})
gulp.task('uglifyJs', cb=>{
gulp.src('static/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('public'))
cb();
})
gulp.task('imagemin', cb=>{
gulp.src('static/img/*')
.pipe(gulpImagemin())
.pipe(gulp.dest('public/img'))
cb();
})
//gulp 文件监听
gulp.task('watch',cb=>{
browserSync.init({
proxy: "http://localhost:8081",
files: ["public/**/*.*", "views/**", "static/**"],
notify: false
});
gulp.watch('static/**/*.scss', gulp.series('scss'))
gulp.watch('static/**/*.js', gulp.series('uglifyJs'))
gulp.watch('static/img/*', gulp.series('imagemin'))
gulp.watch("views/*.html").on('change', reload);
cb();
})
//依次执行任务 顺序为 scss 》 uglifyJs 》 imagemin 》 watch 》 default
gulp.task('default',gulp.series('watch',gulp.series( 'scss', 'uglifyJs', 'imagemin')), cb=>{
cb();
})
 
 
 
 具体使用方法参考官方文档
ps: 中文版的是gulp3.0的文档api不完整
 
 
 

初涉gulp的更多相关文章

  1. gulp初涉

    1.什么是gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用它,不仅可以很 ...

  2. 什么是gulp?

    gulp初涉 1.什么是gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用 ...

  3. gulp是什么?

    什么是gulp? gulp初涉 1.什么是gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的 ...

  4. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  7. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  8. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  9. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  10. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

随机推荐

  1. 练习:集合元素处理(传统方式)-练习:集合元素处理(Stream方式)

    练习:集合元素处理(传统方式) 题目 现在有两个ArrayList集合存储队伍当中的多个成员姓名,要求使用传统的for循环(或增强for循环依次进行以下若干操作步骤︰ 1.第一个队伍只要名字为3个字的 ...

  2. Grafana 系列文章(七):Grafana Explore 中的 Tracing

    ️URL: https://grafana.com/docs/grafana/latest/explore/trace-integration/ Description: Tracing in Exp ...

  3. 2023计算机领域顶会(A类)以及ACL 2023自然语言处理(NLP)研究子方向领域汇总

    2023年的计算语言学协会年会(ACL 2023)共包含26个领域,代表着当前前计算语言学和自然语言处理研究的不同方面.每个领域都有一组相关联的关键字来描述其潜在的子领域, 这些子领域并非排他性的,它 ...

  4. 淘宝首页数据采集之js采集

    搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 既然能打到控制台,当然也能传到系统!!! 既然能打到控制台,当然也能传到系统!!! 既然能打 ...

  5. .NET Core项目部署到Windows系统Docker

    1.新建一个ASP.NET Core Web应用(模型-视图-控制器) 2. 项目启动Docker.Docker OS选择Windows 3.系统默认的dockerfile文件如下 #See http ...

  6. VS 撰写生成了多个撰写错误,其根本原因有X点,如下所列。有关详细信息,请查看CompositionException.Error属性

    打开VS开发程序,莫名其妙的出现如下图错误: 网上找了很多资料,有前辈说以下方法: 解决方案如下 打开文件夹 Users\<CurrentUser>\AppData\Local\Micro ...

  7. ORACLE数据库相关操作

    表操作 -- 截断表 TRUNCATE TABLE TABLE_NAME; -- 删除表 DROP TABLE TABLE_NAME; -- 查询表 SELECT * FROM TABLE_NAME; ...

  8. 从零开始使用阿里云OSS服务(白嫖)

    阿里云对象存储服务OSS使用记录 1 新人免费开通OSS服务 访问 阿里云官网,登录账号(个人新用户账号),首页搜索 对象存储OSS,点击下方的直达. 点击立即开通,此时会在一个新网页中完成开通 完成 ...

  9. vscode+eslint项目规范化,自动格式化配置(项目中用到的)

    项目如果没有格式化插件就会变得十分拥挤,并且因为个人的开发习惯不同,会导致多人配合的时候,某些人的格式不能与你的兼容 导致项目大面积冲突,这样一来统一的格式和开发规范就十分必要了. 1.下载使用vsc ...

  10. 深入解读.NET MAUI音乐播放器项目(三):界面交互

    UI设计的本质是对于产品的理解在界面中多种形式的映射,当需求和定位不同时,对相同的功能表达出了不同的界面和交互方式. 作为播放器,界面可以是千差万别的.<番茄播放器>的iOS平台上我开发了 ...