使用gulp构建项目
gulp.js作为一个前端构建工具,类似于webpack、Grountjs、rollupjs,不过相对于其他几种打包工具,gulp的使用更轻量,配置更简单,打包速度更快,今天不说他们几个的区别,也不说它的实现原理,直接说gulp如何使用。
- 使用背景
- 安装gulp
- gulp的几个常用api
- 配置常用插件
1、使用背景
最近公司官网迭代升级,数据交互基本没有,都是一些展示类的页面,页面也不是特别多,所以考虑直接写静态页面放到服务端;产品要求适配各不同pc端屏幕的大小,设计给稿尺寸标准为1920,考虑到不同分辨率的设备,此次适配标准采用rem;想必rem原理大家都知道,要将设计尺寸转化成rem需要一个转化公式,即
计算尺寸 = 标注尺寸 / 设计尺寸 * 10rem
考虑到上面的计算方式,每个标注尺寸都需要转化为rem,所以考虑到使用less/sass来计算各尺寸大小,由于静态Html无法直接使用less/sass,又不想用webpack,所以选用gulp来作为构建工具编译less/sass,还可以方便开发,下面来开始搭建gulp
2、安装与配置gulp
首先全局安装gulp(node.js已安装)
cnpm install gulp -g
创建一个gulp文件夹(名字自定义)
在新建的文件夹下面启动命令行生成package.json
cnpm init
入口文件改为gulpfile.js(gulpfile.js为gulp工程的配置文件)也可以直接跳过,在package.json文件里修改
这里gulp工程就初始化完成了,下面来说一下gulp的几个api
3、gulp的几个常用api
gulp很简单,其api也不多,在它的官网都可以很容易看得到,包括gulp.task()、gulp.src()、gulp.dest()、gulp.watch()
(1)、gulp.task()用以创建一个任务,传入两个参数; ==> gulp.task('style',function(){})
参数一为一个String类型字符串,作为当前任务名称
参数二为一个Function,用来配置当前任务执行的操作
(2)、gulp.src()用以指定处理目标,传入一个文件路径或一个文件夹路径,类型为String的参数;==> gulp.src('src/styles/*.less')
(3)、gulp.dest()用以输出处理后的文件存放目录,同样传入一个文件路径或一个文件夹路径,类型为String的参数;==> gulp.dest('dist/css')
(4)、gulp.watch()用以监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,传入两个参数;==> gulp.watch('src/styles/*.less',['style']);
参数一为监听的目标(String)
参数二为执行的任务名称(Array)
4、配置常用插件
可能上面说的不太好理解,下面是我正在用的一个简单的gulp工具,以此为例配置一个gulp构建工程,用到了下面几个插件
- gulp-less // css预处理插件
- gulp-cssnano // css压缩插件
- gulp-concat // 合并js文件
- gulp-uglify // 压缩js文件
- gulp-htmlmin // 压缩html
- browser-sync // 文件热加载
配置文件如下
'use strict';
var gulp=require('gulp');
var less=require('gulp-less');
var cssnano=require('gulp-cssnano');
var concat=require('gulp-concat');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var browserSync=require('browser-sync'); gulp.task('style',function(){
gulp.src('src/styles/*.less')
.pipe(less())
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream:true
}));
}); gulp.task('script',function(){
gulp.src('src/scripts/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.reload({
stream:true
}));
}) gulp.task('image',function(){
gulp.src('src/images/*.*')
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.reload({
stream:true
}));
}) gulp.task('html',function(){
gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
stream:true
}));
}) gulp.task('server',function(){ // 启动gulp server
browserSync({
server:{
baseDir:['dist']
},
},function(err,bs){
console.log(bs.options.getIn(["urls","local"]));
}); gulp.watch('src/styles/*.less',['style']);
gulp.watch('src/scripts/*.js',['script']);
gulp.watch('src/images/*.*',['image']);
gulp.watch('src/*.html',['html']); });
使用gulp构建项目的更多相关文章
- express+gulp构建项目(二)启动项目和主文件
这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...
- express+gulp构建项目(一)项目目录结构
express是基于nodejs平台的web框架,它可以让我们快速开发出web引用.而gulp是一种自动构建工具,非常强大,有了它,能帮我们完成很多繁琐的工作,例如,静态文件的压缩,为静态文件加上哈希 ...
- express+gulp构建项目(五)swig模板
这里的文件负责配置swig模板引擎. index.js var jsonHash = require('./json_file'); var staticTag = require("./t ...
- express+gulp构建项目(四)env环境变量
这里的文件的作用是负责设置env环境变量和日志. index.js try { require('dotenv').load({silent: true}); //dotenv从一个.env文件中读取 ...
- express+gulp构建项目(三)gulp任务
这次来看一看gulp是怎么工作的. tasks/paths.js paths.js文件里存放的是gulp任务中需要导入的文件的路径和导出的路径. /** * gulp.src 地址 * gulp.de ...
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- 2016-7-15(1)使用gulp构建一个项目
gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依 靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查 ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
随机推荐
- ESXi6.5上的Ubuntu虚机在远程SSH时宕机
情况是这样的, 有一个ESXi6.5上跑的Ubuntu虚机, 版本是18.04.1, 今天升级成18.04.2后, 就发现远程连接SSH不对劲, 在本地登录和操作都好好的, 只要远程SSH一连接, 服 ...
- windows开机自动执行bat脚本
一.以windows下备份sql数据库为例,开机自动执行.bat脚本 1.新建dump.bat文件,文件中的代码如下: set YYYYmmdd=%date:~0,4%%date:~5,2%%date ...
- Win10访问共享文件夹如何取消用户名密码
win10中,开启guest(来宾)账户的步骤是: 右击win10左下角Windows的图标->计算机管理->计算机管理(本地)->系统工具->本地用户和组->用户-&g ...
- HTTP协议复习
HTTP请求/响应的步骤: 客户端连接到WEB服务器:浏览器与web服务器的HTTP端口建立一个TCP套接字连接,例如:http://www.baidu.com 发送HTTP请求:通过TCP套接字,客 ...
- 最新 浩德钢圈java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.浩德钢圈等10家互联网公司的校招Offer,因为某些自身原因最终选择了浩德钢圈.6.7月主要是做系统复习.项目复盘.Leet ...
- 第07组 Beta冲刺(3/4)
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:学习了很多东西 Github签入记录 接下来的计划:继续学习 还剩下哪些任务:后端部分 燃尽图 遇到的困难:自己太菜了 收获和疑问: ...
- Tomcat详解|乐字节
大家好,欢迎来到乐字节小乐的Java技术分享园地.这次给大家分享的是Tomcat 一. 什么是 Tomcat Tomcat 是一个符合 JavaEE WEB 标准的最小的 WEB 容器,所有的 J ...
- chamfer_pcd
import tensorflow as tf import numpy as np def distance_matrix(array1, array2): """ a ...
- TCP报文格式+UDP报文格式+MAC帧格式
TCP和UDP的区别: 1)TCP是面向连接的,而UDP是无连接的 2)TCP提供可靠服务,而UDP不提供可靠服务,只是尽最大努力交付报文 3)TCP面向字节流,TCP把数据看成一串无结构的字节流,而 ...
- Java连接数据库——最基础的方式
JAVAWEB实现增删查改(图书信息管理)之Util类 Util.java ↓ package BookSystem.Other; import java.sql.*; import java.ut ...