简单gulp.js
引入相对应的文件
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的更多相关文章
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- Gulp.js简介
Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...
- “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- [翻译]Gulp.js简介
我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新 ...
- gulp.js实现less批量实时编译
问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- gulp.js 的安装以及使用
首先:电脑需要安装 Node.js 一个大绿色的安装按钮,点击就可以. 但还是推荐,点击download选中一款适合电脑配置的版本. Node安装过程,就是下一步 and 下一步~~ 测试手否安装成功 ...
- js/jq基础(日常整理记录)-2-一个简单的js方法实现集合的非引用拷贝
一.一个简单的js方法实现集合拷贝 做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝. 举 ...
随机推荐
- Parhaps you are running on a JRE rather than a JDK?
maven项目启动时报错 解决方案: 第一步:在启动项目上右击 第二步:修改JRE为JDK,双击划线部分 第三步:如果没有配置JDK,进行以下操作 第四步:从本地添加JDK 第五步:应用JDK 选择好 ...
- Bresenham算法
1 算法原理 基本原理从某处摘得:设直线方程为yi+1=yi+k(xi+1-xi)+k.假设列坐标象素已经确定为xi,其行坐标为yi.那么下一个象素的列坐标为xi+1,而行坐标要么为yi,要么递增1为 ...
- topcoder srm 635 div1
problem1 link 首先枚举长度$L$.然后计算每一段长度$L$的差值最大公约数,然后差值除以最大公约数的结果可以作为当前段的关键字.然后不同段就可以比较他们的关键字,一样就是可以转化的. p ...
- linux下的缓存机制及清理buffer/cache/swap的方法梳理 (转)
一.缓存机制介绍 在Linux系统中,为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果 ...
- Bigger-Mai 养成计划,Docker之安装,部署
CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 前提条件 目前,CentOS 仅发 ...
- No Directionality widget found.错误记录。
import 'package:flutter/material.dart'; void main() => runApp(new Center(child: new Text('Hello, ...
- Codeforces Round #544 (Div. 3)解题报告
A.Middle of the Contest 考虑把输入的时间单位化成分钟,相加除以2就好了 #include<bits/stdc++.h> using namespace std; # ...
- scala链接mysql
方法一:链接并操作mysql //链接Mysqlval driver = "com.mysql.jdbc.Driver"val url = "jdbc:mysql://1 ...
- Gridview标题头添加排序图片
向gridview标题头中添加排序图片,当点击某一个头标题时,在标题中出现升序箭头向上的图片,再点击一次时降序,在标题中出现箭头向下的图片,初始页面时在标题头中并不现实任何图片. 先定义好一个grid ...
- 阿里云Hadoop集群DataNode连接不上NameNode
在logs日志中可以看见DataNode多次去连NameNode,但是都失败了. 经过长时间的研究百度,终于知道了原因. 原因就是安全组限制了端口的开放,所以我们只要把相应的端口打开即可.