前端构建的初步尝试

前言

这篇文章的主要目的是告诉大家,构建工具可以做那些事情.大家不必去深入研究这个东西.最基本的是有个概念.

什么是前端构建?

在平时我们浏览一些大型的站点,会发现其中的一些css经过压缩(去掉了空白符,注释),js经过了混淆和压缩.一些引用的文件的链接会加上奇怪的字串(文件md5),例如:

<link rel="stylesheet" href="/css/popModal-5c7f30ff2b.css" type="text/css" media="all"/>

这样做有什么好处呢?压缩可以减小文件的体积利于在网络中传输,从而加快网页的响应.文件加md5戳主要是为了解决文件更新和浏览器缓存的冲突.

这部分可以参阅 大公司里怎样开发和部署前端代码？

什么是构建工具?

前端部署在经历的刀耕火种的工人时代(手动)后，迎来了工业时代（自动化工具）。随着node的出现,以此为基础的构建工具有代表性的有grunt,gulp,webpack.这些工具主要就是帮我们完成上述的工作.针对目前我们的项目的情况,不需要对这些工具进行太高深的研究,几个基本的功能就能达到很好的效果.

gulp

我在使用了几种构建工具后,感觉gulp是最好的.之前用过grunt,被它的繁杂的配置文件吓到了.webpack是最新最火的构建工具,但是这个工具更侧重于模块化和打包,对于我们现在来说不太适用.之后又使用了百度前端的FIS,本想着这个构建工具拥有傻瓜式配置,国内大公司出品,质量有保障的的优点.但是使用之后,发现这个FIS更适用于纯前端.最后在经过使用gulp后,发现它基本可以满足我们现在项目的需求.

准备

需要安装node和gulp,这里偷懒一下,这个安装教程太多了,网上一搜一大把,可以参考这个gulp安装即可

实战

1. 分析目前前端资源

我们项目的前端目录结构

  simplebootx/
    --Portal/
      --News/
        index.html
    --Public/
    --css/
      --Archaeol/
        academic.css
      style.css
    --images
    --js
      --wenbobaike
        province.js
      digit.js
    simpleboot/
    head_bt3.html
    scripts.html

这个是我们项目的基本目录.

在使用过程中,有一个问题之前困扰着我,那就是构建工具基本都是针对纯前端的,我们的前端其实是后端框架的模板文件,文件路径是个很头疼的问题.这也是我放弃百度的FIS的原因.经过实践发现gulp这个工具比较灵活,就是开始配置麻烦一些.

2. 我们需要的功能

css,js的压缩,文件md5戳.

需要安装的gulp插件在package.json中,具体安装过程可以参考 准备步骤

{
  "name": "test",
  "version": "1.0.0",
  "description": "This is for study gulp project !",
  "homepage": "",
  "repository": "",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.2",                          //文件删除
    "gulp": "^3.9.1",                         //gulp
    "gulp-clean-css": "^2.0.12",              //css压缩
    "gulp-filter": "^4.0.0",
    "gulp-htmlmin": "^2.0.0",                 //html压缩,去掉html的注释,压缩行内css等
    "gulp-less": "^3.1.0",                    //less编译
    "gulp-rev": "^7.1.2",                     //md5
    "gulp-rev-collector": "^1.0.5",           //md5文件关联
    "gulp-uglify": "^2.0.0",                  //js混淆
    "gulp-useref": "^3.1.0",
    "vinyl-paths": "^2.1.0"
  }
}

3. gulpfile.js文件编写

/*
  前面的步骤都是定义一些路径的变量

*/

//dist是生成版本的目标文件夹,就是最终要部署到线上的文件夹
var dist = "./dist/";
//src目录是我们的源代码
var src = "./simplebootx/";
var static = "Public/";
var paths = {
    tpl:"Portal/**/*.html",
    css:"css/**/*.css",
    images:"images/**.*",
    js:"js/**/*.js",
    lib:{
        boostrap:"simpleboot/**/*.*"
    }
};

/*
  引入要使用的插件
*/
var gulp = require(‘gulp‘);
var cleanCSS = require(‘gulp-clean-css‘);
var rev = require(‘gulp-rev‘);
var revCollector = require(‘gulp-rev-collector‘);
var del = require(‘del‘);
var vinylPaths = require(‘vinyl-paths‘);
var uglify = require(‘gulp-uglify‘);
var htmlmin = require(‘gulp-htmlmin‘);
var del = require(‘del‘);
var s = src + static,
    d = dist + static;
//不用编译的文件复制到生成环境中
gulp.task("copy",function (cb) {
    gulp.src(src+"*.html")
        .pipe(gulp.dest(dist));
    gulp.src(s+paths.images)
        .pipe(gulp.dest(d+"images"));
    gulp.src(s+paths.lib.boostrap)
        .pipe(gulp.dest(d+"simpleboot/"));
});

//压缩css
gulp.task("compressCss",function(){
    return gulp.src(s+paths.css)
            .pipe(cleanCSS({compatibility: ‘ie8‘}))
            .pipe(gulp.dest(d+"css"));
});
//压缩js
gulp.task(‘compressJs‘,function () {
    return gulp.src(s+paths.js)
            .pipe(uglify())
            .pipe(gulp.dest(d+"js"));

});
//压缩html
gulp.task(‘compressHtml‘,function () {
    var options = {
        removeComments: true,//清除HTML注释
        removeScriptTypeAttributes: true,//删除`<script>`的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除`<style`>和`<link>`的type="text/css"
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src(src+‘/jump.html‘)
        .pipe(htmlmin(options))
        .pipe(gulp.dest(dist));

});
//md5
gulp.task(‘concat‘,function() {                                //- 创建一个名为 concat 的 task
    return gulp.src(s+paths.css)  //- 需要处理的css文件，放到一个字符串数组里
        .pipe(rev())                                           //- 文件名加MD5后缀
        .pipe(cleanCSS({compatibility: ‘ie8‘}))
        .pipe(gulp.dest(d+‘css/‘))                              //- 输出文件本地
        .pipe(rev.manifest())                                  //- 生成一个rev-manifest.json
        .pipe(gulp.dest(‘./rev‘));                            //- 将 rev-manifest.json 保存到 rev 目录内

});
gulp.task(‘rev‘,[‘concat‘],function() {
    return gulp.src([‘./rev/*.json‘, src+‘**/*.html‘])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())                                  //- 执行文件内css名的替换
        .pipe(gulp.dest(dist));                  //- 替换后的文件输出的目录

});
//我们最后要运行的命令就是`gulp default`;
gulp.task(‘default‘, [‘copy‘,‘compressJs‘,‘compressHtml‘, ‘rev‘]);

4. 开始敲命令吧!

按下键盘的 win 键 + r键,输入 cmd ,调出命令行工具.

在命令行中输入 cd D:\xampp\htdocs\gulp (这个是我的项目路径) ,切换到gulpfile.js所在的文件夹,在命令行中输入gulp default,此时注意,gulp目录中是没有dist这个文件夹的,我们就是要在dist这个文件夹中生成我们要的生产版本文件.
命令执行过程:

命令完成后,dist文件夹:

5. 看看变化吧

生成了一个新的dist文件夹,而且里面的文件结构什么的和我们原结构很类似的.那么我们打开生成的文件和原文件对比一下,看看是否达到了效果.比如我们打开文件/simplebootx/Portal/index.html

对应的生产文件/dist/Portal/index.html

我们发现 popModal.css 变成了 popModal-5c7f30ff2b.css,而在对应的css文件中,我们确实找到了popModal-5c7f30ff2b.css,而且这个文件与原文件相比较是经过压缩的.

同理我们可以发现,相关的js也都经过的压缩和混淆.

那么效果如何呢?可以打开对应的文件,比如/simplebootx/Public/js/calendar.js文件原大小是7k,经过处理后变成了4k,将近缩小了一半.而且文件越大,效果月明显

其他的就不一一举例了,可以先自己看demo

一些说明

关于文件md5

构建成功了,如何发布新的文件版本呢?

我们还用/simplebootx/Public/css/popModal.css举例.在这个文件中,我们进行了一些修改,在第十二行中,我们把

.popModal:after {content:‘‘;position:absolute;border:10px solid transparent}

改成了

.popModal:after {content:‘‘;position:absolute;border:10px solid red}

此时在生产环境index.html中引用的popModal.css名字是popModal-5c7f30ff2b.css,wb.css对应的生产文件名是wb-1fe58ce92d.css.经过重新的构建后生产环境中的文件变成了popModal-740872e77c.css,在生产环境的css文件夹中也生产了新的文件.而且wb.css对应的生产文件名没有变化

参考

  1. gulp详细入门教程
  2. gulp官方
  3. 使用gulp构建你的前端项目

原文地址：https://www.cnblogs.com/10manongit/p/12614667.html

时间： 2024-12-26 00:16:42

前端构建的初步尝试的相关文章

前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst

前端构建工具gulpjs的使用介绍及技巧(转载)

本文转载自无双 ,原文地址 http://www.cnblogs.com/2050/p/4198792.html. 感谢原博主的辛苦总结. gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的AP

前端构建和模块化工具-coolie

[前言] 如果你之前用过前端模块化工具:seajs,requirejs, 用过前端构建工具grunt.gulp, 并且感到了一些不方便和痛苦,那么你可以试试coolie [coolie] 本文不是一篇介绍coolie的文章,而是偏向新手上手coolie的常见问题解答, coolie相关: 社区文章:http://frontenddev.org/column/introduce-coolie/ git-book:http://coolie.ydr.me/index.html [知识储备] 如果你没

[转载]前端构建工具gulpjs的使用介绍及技巧

转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp

（转）前端构建工具gulp入门教程

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,

前端构建工具gulpjs的使用介绍及技巧(转)

http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首

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

Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什么使得 gulp.js 备受关注呢? Grunt 之殇 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一

webpack前端构建工具学习总结（四）之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev 2.在webpack.config.js文件中,引入html-webpack-plugin插件 3.输入命令:npm run webpack,编译打包 可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此

记学习前端构建工具gulp的过程，略心酸

初学前端的时候就听过友人说,前端不好学,很多软件都是要自己下载安装插件的,当时是很不以为然的,不就是下载几个软件外加安装插件吗?!怎么会很难呢!后面才发现自己真的错了. 今天刚好准备好好看看前端构建工具gulp的使用,于是乎就各种上网查资料.刚开始的时候有点摸不着头脑,这个东西不是一个软件,拿来就用,需要自己配置环境,自己根据需求安装package,完全是自己DIY的一个工具. 下面就把整个安装过程,记录下来,方便以后查看吧. 先明确几个概念:1.gulp是基于node.js环境下工作的:2.命