前言

  在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变慢,因此我们认识到了前端优化的重要性,但是之前的压缩打包都是需要我们自己手动执行或者去直接转化的网站进行转化,这无疑增加了我们的工作量,作为程序员,我觉得更重要的是让程序去执行我们想执行的东西,于是我便google了起来,查到了grunt和gulp,两者都是自动化打包,但是grunt的一大堆繁杂的配置参数让我头疼不已,直到我打开了gulp的官网,仿佛打开了新世界的大门,没有一大堆繁杂的配置参数,其API也是非常简单,学习起来很容易,而且gulp使用的是nodejs中的stream流来读取和操作数据的,使其速度更快。于是就有了下面的实践了。 

在这里已经默认你已经了解过gulp的入门了并已经安装了node.js,如果不了解的话请自行百度。

创建工程目录

  首先,先建立一个工程目录,正所谓好的目录就是工程的骨架,能让别人一眼就清楚哪个模块是干什么的,也便于代码的维护管理,下面是我的目录结构:

testGulp/
├── app/
│ ├── static/
│ │ ├── images/
│ │ │ └─ index.jpg
│ │ ├── less/
│ │ │ └─ index.less
│ │ └── scripts/
│ │ └─ index.js
│ └── views/
│ └─ index.html

├── dist/
└── release/

初始化npm

  我们在新建目录结构的时候,里面是没有package.json文件的,需要我们npm init一下,然后不断的回车,就会生成一个package.json文件了,熟悉了解node的同学肯定了解package.json文件的作用,里面包含了我们项目所需要的各种模块的依赖和基本信息。下面是我的package.json:

{
"name": "testGulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Kevin",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-clean": "^0.3.2",
"gulp-concat-dir": "^1.0.0",
"gulp-imagemin": "^4.0.0",
"gulp-less": "^3.3.2",
"gulp-minify-css": "^1.2.4",
"gulp-minify-html": "^1.0.6",
"gulp-plumber": "^1.1.0",
"gulp-run-sequence": "^0.3.2",
"gulp-uglify": "^3.0.0",
"gulp-zip": "^4.0.0"
}
}

安装gulp任务所需要的模块

  打开终端通过输入 npm install package(安装的包名,如:gulp) —save-dev然后回车,会发现终端有一个进度条正在安装加载,安装成功打开package.json可以发现devDependencies中会出现我们刚才安装的包名以及对应的版本号。

  这里也许有同学会问在其他地方有时候会看到别人用的是—save,有时时—save-dev,究竟两者的区别是什么:

   使用—save-dev(也可以缩写成-D)输出的会出现在devDependencies,代表着是开发调试时的依赖,等到项目真正发布的时候不会真正出现在项目中。

   使用—save(也可以缩写成-S)输出的会出现在dependencies,代表着是发布后的依赖,等到项目真正发布的时候会真正出现在项目中,缺少它们项目会运行不了。

构建Gulp任务

  Gulp用来协调指挥其他模块的工作。首先在myproject文件夹下新建gulpfile.js文件,gulp会运行这个文件中的js,我的文件最终内容如下:

//使用严格模式。保证js的严谨,养成一个好习惯。
'use strict'; //使用require引入所有需要的模块,Gulp.js是基于Node.js构建的
//因为Node.js遵循CommondJS规范
//CommondJS其中有一个Modules规范,使其可以以同步的模式加载模块
var gulp = require('gulp'),
//压缩js
uglify = require('gulp-uglify'),
//编译Less
less = require('gulp-less'),
//压缩css
minifyCss = require('gulp-minify-css'),
//自动前缀补全
autoprefixer = require('gulp-autoprefixer'),
//压缩HTML
minifyHtml = require('gulp-minify-html'),
//压缩图片
imagemin = require('gulp-imagemin'),
//管合并,可以合并同一目录下的所有文件,好处是可以减少网络请求
concat = require('gulp-concat-dir'),
//错误处理提示插件
plumber = require('gulp-plumber'),
//压缩文件
zip = require('gulp-zip'),
//控制task中的串行和并行。(gulp默认是并行)
//串行是指多个任务时,各个任务按顺序执行,完成一个之后才能进行下一个。
//并行指的是多个任务可以同时执行。
runSequence = require('gulp-run-sequence'),
//用来删除文件
clean = require('gulp-clean'); //创建一个名为js的任务
gulp.task('js', function(){
// 首先取得app/static/scripts下的所有为.js的文件(**/的意思是包含所有子文件夹)
return gulp.src('app/static/scripts/**/*.js')
//错误管理模块(有错误时会自动输出提示到终端上)
.pipe(plumber())
//合并同一目录下的所有文件,并将合并的目录名作为合并后的文件名
.pipe(concat({ext: '.js'}))
//js压缩
.pipe(uglify())
//将合并压缩后的文件输出到dist/static/scripts下(假如没有dist目录则自动生成dist目录)
.pipe(gulp.dest('dist/static/scripts'))
}); //创建一个名为less的任务
gulp.task('less', function(){
// 首先取得app/static/less下的所有为.less的文件(**/的意思是包含所有子文件夹)
return gulp.src('app/static/less/**/*.less')
//错误管理模块(有错误时会自动输出提示到终端上)
.pipe(plumber())
//编译less文件使其转换为css文件
.pipe(less())
//前缀自动补全插件
.pipe(autoprefixer())
//合并同一目录下的所有文件,并将合并的目录名作为合并后的文件名
.pipe(concat({ext: '.css'}))
//css压缩
.pipe(minifyCss())
//将合并压缩后的文件输出到dist/static/css下(假如没有dist目录则自动生成dist目录)
.pipe(gulp.dest('dist/static/css'))
}); //创建一个名为html的任务
gulp.task('html', function(){
// 首先取得app/views下的所有为.html的文件(**/的意思是包含所有子文件夹)
return gulp.src('app/views/**/*.html')
//错误管理模块(有错误时会自动输出提示到终端上)
.pipe(plumber())
//html压缩
.pipe(minifyHtml())
//将压缩后的文件输出到dist/views下(假如没有dist目录则自动生成dist目录)
.pipe(gulp.dest('dist/views'))
}); //创建一个名为images的任务
gulp.task('images', function(){
// 首先取得app/static/images下的所有为.{png,jpg,jpeg,ico,gif,svg}后缀的图片文件(**/的意思是包含所有子文件夹)
return gulp.src('app/static/images/**/*.{png,jpg,jpeg,ico,gif,svg}')
//错误管理模块(有错误时会自动输出提示到终端上)
.pipe(plumber())
.pipe(imagemin({
optimizationLevel: , //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
//将压缩后的图片输出到dist/static/images下(假如没有dist目录则自动生成dist目录)
.pipe(gulp.dest('dist/static/images'))
}); //创建一个名为clean的任务
gulp.task('clean', function(){
// 首先取得dist/*下的所有文件
return gulp.src('dist/*', {read: false})
//删除dist/*下的所有文件
.pipe(clean())
}) //创建一个名为public的任务
gulp.task('public', function(){
// 首先取得dist/*下的所有文件
return gulp.src('dist/*')
//错误管理模块(有错误时会自动输出提示到终端上)
.pipe(plumber())
//将dist/*下的所有文件进行压缩打包生成为public.zip文件
.pipe(zip('public.zip'))
//将生成的public.zip文件输出到release下(假如没有release目录则自动生成release目录)
.pipe(gulp.dest('release'))
}) //创建一个名为watch的任务
gulp.task('watch', function(){
//监听各个目录的文件,如果有变动则执行相应的任务操作文件
gulp.watch('app/static/scripts/**/*.js',['js']);
gulp.watch('app/static/less/**/*.less',['less']);
gulp.watch('app/views/**/*.html',['html']);
}) //创建一个名为redist的任务
gulp.task('redist', function(){
//先运行clean,然后并行运行html,js,less,images,watch
//如果不使用gulp-run-sequence插件的话,由于gulp是并行执行的
//有可能会出现一种情况(其他文件处理速度快的已经处理完了,然后clean最后才执行,会把前面处理完的文件删掉,所以要用到runSequence)
runSequence('clean', ['html', 'less', 'js', 'images', 'watch'])
}) //创建一个名为default的任务(上面的任务都可以没有,但是这个任务必须有,不然在终端执行gulp命令会报错)
//在终端上输入gulp命令,会默认执行default任务,并执行redist任务
gulp.task('default', ['redist']);

最后

  打开终端进入所在目录,输入gulp就可以哗哗哗看到我们压缩打包好的文件了,希望能帮助到一些在配置gulp遇到困扰的小伙伴。

使用Gulp构建前端自动化方案的更多相关文章

  1. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  2. Gulp构建前端自动化项目

    类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果:

  3. 基于gulp的前端自动化方案

    前言 ​ 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好 ...

  4. 如何利用gulp构建前端自动化

    1,使用 gulp.watch 来监听文件自动打包 在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若 ...

  5. [转]gulp构建前端工程

    摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...

  6. 基于gulp 的前端自动化构建方案总结

    一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...

  7. 基于gulp的前端自动化开发构建

    就前端的发展而言会越来越朝着后端的标准化靠近,后端的工程化以及模块化都很成熟.基于这样一个思路,开始探索如何优化目前的开发流程.而使用的工具就是gulp. 个人觉得gulp比较webpack更为简单实 ...

  8. 基于gulp的前端自动化开发构建新

    关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新, ...

  9. 使用gulp助力前端自动化

    前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了.其实并没有,只不过它从台前退居到了幕后.我们仍然可以在很多项目中看到它的身影,比如elementplus. ...

随机推荐

  1. mybatis 和hibernate的区别

    mybaits 是不完全的orm(对象关系映射(Object Relational Mapping)框架,需要自己书写sql语句 mybatis学习难度必hibernate低适合关系型模型要求不高的软 ...

  2. Rythm.js 使用教程详解

    转载自 http://blog.csdn.net/qq_26536483/article/details/78261515 简介 rythm.js是一款让页面元素跳动起来的插件,并且带音乐,共7种用法 ...

  3. CSS之 border 属性

    特性 border-width 不支持百分比  border-color 默认颜色是 color  border-color 透明值的作用:可利用增加可点击区域,利用内阴影做边框  border 应用 ...

  4. 解题笔记-洛谷-P1010 幂次方

    0 题面 题目描述 任何一个正整数都可以用2的幂次方表示.例如 137=2^7+2^3+2^0 同时约定方次用括号来表示,即a^b 可表示为a(b). 由此可知,137可表示为: 2(7)+2(3)+ ...

  5. 在打开Dreamweaver软件情况下,vs2010 asp项目无法调试

    会出现以下情况,只要关闭Dreamweaver就可以正常调试vs2010 asp项目.

  6. swiper使用小结

    最近做一个移动端项目想用Swiper移动端插件,需求实现一个轮播图的效果,并且需要自定义分页器,效果跟这个差不多这里demo 好吧,开始动手! 注意参考的3.0Swiper的API文档需要引入3.0版 ...

  7. Linux入门(8)——Ubuntu16.04安装sublime text 3并配置Python开发环境

    打开终端,添加sublime text 3的仓库: 按enter键继续 更新软件库: sudo apt-get update 安装Sublime Text 3: sudo apt-get instal ...

  8. Tomcat针对网站打开速度慢进行局部优化方案

    首先打开tomcat下的conf文件夹里面的server.xml找到Tomcat端口号一栏 <Connector port="8081" protocol="HTT ...

  9. 跟着弦哥学人工智能2—HAND-CRAFTED RULES实现的人工智能及其缺陷

    隔壁有个妹纸喷我​,好高兴....给她回复了下 哎呀,没想到是个妹纸,其实我就随便那么一说,没合计妹纸还专门写个檄文声讨我,受宠若惊其实你的评论一看就比较专业,所以我就去你博客大概扫了一眼,发现个大问 ...

  10. gridContro使用随记

    gridControl设置列宽自动适应内容:绑定数据后调用如下代码即可设置.gridControl1.DataSource = m_pTablegridView1.BestFitColumns(); ...