//文件结构

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. BUG日记之————>springboot使用QueryMapper多条件查询

    使用MP的QueryMapper这里注意配置的Maven 注意这里的 .isEmpty 和hasText和hasLength不是一种类型

  2. 【原创】项目六 Load Of The Root

    实战流程 新创建文件夹,在这个文件夹里进行操作 nmap扫描下网段 根据nmap逐个排查,发现目标主机,但只有22端口 因此进一步扫描22端口的具体信息,没有扫出很有用的信息 发现靶场又提示一个用户, ...

  3. P6327 区间加区间sin和 题解

    P6327 区间加区间sin和 题解 题目描述 给出一个长度为 \(n\) 的整数序列 \(a_1,a_2,\ldots,a_n\),进行 \(m\) 次操作,操作分为两类. 操作 \(1\):给出 ...

  4. Python内置对象(一)

    Python内置对象(一) 分多次讲解 这部分相对比较简单,偶尔一些特殊的做法会强调下(前面加★) 总览 builtins = [_ for _ in dir(__builtins__) if not ...

  5. Python中的函数定义中的斜杠/和星号*

    Python中的函数定义中的斜杠/和星号* 示例 看一段代码  def say_hello(name,age=18):     print(f'你好!我是{name},今年我{age}啦.') say ...

  6. 【ccc】为了ds的ccc2

    作业: #include <stdio.h> #include<string.h> int main(){ char s[100]; gets(s); int len; len ...

  7. gitlabApi如何获取项目文件夹的commitId

      在我们做配置管理系统和gitlab系统集成的时候,有一个常见的场景,就是要获取某个文件的commitId,来记录本次配置文件提交的版本.这个通过gitlabApi很容易实现: GET /proje ...

  8. 【译】.NET 7 中的性能改进(一)

    原文 | Stephen Toub 翻译 | 郑子铭 一年前,我发布了.NET 6 中的性能改进,紧接着是.NET 5..NET Core 3.0..NET Core 2.1和.NET Core 2. ...

  9. JZOJ 3736. 【NOI2014模拟7.11】数学题

    \(\text{Problem}\) 给出向量 \(\boldsymbol a = (x1,y1), \boldsymbol b = (x2,y2)\) 求 \(|\lambda_1\boldsymb ...

  10. T-SQL——将字符串转为单列

    目录 0. 背景 1. 使用STRING_SPLIT函数 2. 自定义分裂函数 3. 使用示例 shanzm-2023年2月22日 0. 背景 代码中执行存储过程,参数是多个且不确定数量,期望SQL查 ...