引入相对应的文件

let gulp = require("gulp");
let inject = require("gulp-inject");
let cleanCss = require("gulp-clean-css");
let uglify = require("gulp-uglify");
let pump = require("pump");
let cache = require("gulp-cache");
let rename = require("gulp-rename");
let imagemin = require("gulp-imagemin"); //图片压缩
let less = require("gulp-less"); //less编译成css
let clean = require("gulp-clean"); // gulp之前将之前的dist文件清除
let runSequence = require("run-sequence");
let series = require('stream-series');
gulp.task("default", ["clean:dist"], function(){
  runSequence("inject");
  // gulp.watch("src/less/*.less", ["less"]);
});

清除文件,一般执行在default之前

//clean:dist
gulp.task("clean:dist", function() {
  return gulp.src(["dist/images", "dist/js", "dist/css"], {
    read: false
  })
  .pipe(clean());
});

将less解压成css

// less 文件
gulp.task("less", function () {
  return gulp.src("src/less/*.less")
    .pipe(less())
    .pipe(gulp.dest("src/css"));
});

压缩js

// 压缩 js
gulp.task("js", function(cb){
  pump([
    gulp.src("src/js/*.js"),
    uglify(),
  gulp.dest("dist/js")
  ], cb);
});

压缩图片

// 图片
gulp.task("images", function() {
  return gulp.src("src/images/*")
    .pipe(cache(imagemin({
      optimizationLevel: ,
      progressive: true,
      interlaced: true
    })))
    .pipe(gulp.dest("dist/images"));
});

压缩css

// 压缩css
gulp.task("css", ["less"], function(){
  return gulp.src("src/css/*.css")
    .pipe(cleanCss({debug: true}))
    .pipe(rename({suffix: ".min"}))
    .pipe(gulp.dest("dist/css"));
});

将css文件注入

gulp.task("inject", ["images", "css", "js"], function(){
  let sourcesIndex = gulp.src(['./dist/css/*.css', '!./dist/css/style.min.css'], {read: false});
  let sourcesCommon = gulp.src(['./dist/css/style.min.css'], {read: false});
  return gulp.src("./src/index.html")
    .pipe(inject(series(sourcesIndex, sourcesCommon), {
      relative: true,
      transform: function (filepath) {
        var filename=filepath.substring(filepath.lastIndexOf("/") + );
        return '<link rel="stylesheet" href="css/'+ filename +'"/>';
      }}))
  .pipe(gulp.dest("./dist"));
});

简单gulp.js的更多相关文章

  1. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  2. Gulp.js简介

    Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...

  3. “流式”前端构建工具——gulp.js 简介

    Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...

  4. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  5. [翻译]Gulp.js简介

    我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新 ...

  6. gulp.js实现less批量实时编译

    问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...

  7. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  8. gulp.js 的安装以及使用

    首先:电脑需要安装 Node.js 一个大绿色的安装按钮,点击就可以. 但还是推荐,点击download选中一款适合电脑配置的版本. Node安装过程,就是下一步 and 下一步~~ 测试手否安装成功 ...

  9. js/jq基础(日常整理记录)-2-一个简单的js方法实现集合的非引用拷贝

    一.一个简单的js方法实现集合拷贝 做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝. 举 ...

随机推荐

  1. Python脚本备份

    #!/usr/bin/python3 # -*- coding:utf- -*- # 保证源程序可以输入汉字 print bool([]) # 任何为零的数字或空集(空列表.空元组和空字典等)均为Fa ...

  2. Matlab 将两个图像进行分离 已知其中一个图像

    5.下图(a)是一幅两个灰度图像合成的图像,已知其中一幅图像如图(b)所示,试把另一幅图像提取出来,并显示. 运用减法做 %加载入要处理的图片 A=imread('a.png'); %将I变为[0,1 ...

  3. javascript面向对象知识

    <html> <head> <script></script> </head> <body> <!-- <scrip ...

  4. Maven下载与环境变量配置

    前言: Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK.如果还未安装 JDK,可以参考Win10下JDK下载与环境变量配置. 项目 要求 JDK Maven 3.3+ ...

  5. JAVA程序错误总结

    NoSuchMethodError:main 出错原因:找不到main方法,应该是main方法书写有误. 解决方案:检查public static void main(String [] args){ ...

  6. canvas 水波纹

    <!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset=&qu ...

  7. Kafka集群安装部署、Kafka生产者、Kafka消费者

    Storm上游数据源之Kakfa 目标: 理解Storm消费的数据来源.理解JMS规范.理解Kafka核心组件.掌握Kakfa生产者API.掌握Kafka消费者API.对流式计算的生态环境有深入的了解 ...

  8. winform SerialPort串口通信问题

    一.串口通信简介串行接口(串口)是一种可以将接受来自CPU的并行数据字符转换为连续的串行数据流发送出去,同时可将接受的串行数据流转换为并行的数据字符供给CPU的器件.一般完成这种功能的电路,我们称为串 ...

  9. gdb 命令汇总

    https://ftp.gnu.org/old-gnu/Manuals/gdb/html_node/gdb_109.html whatis expr 举例 whatis  uint64      -& ...

  10. vue日历控件,自定义选择年月 选择年月日 选择年月日时 选择年月日时分,自定义日期范围

    下载地址:https://pan.baidu.com/s/1iEZl4kDkEg4ybwqc7aI7vQ 注:功能更加全面的日历控件请访问:https://www.cnblogs.com/mrzhu/ ...