资讯专栏INFORMATION COLUMN

Gulp--手把手教你搭建前端自动化平台

LeviDing / 2825人阅读

摘要:前端的发展真的是快,前几年还是刀耕火种的开个编辑器,几行和代码就能上浏览器跑了。是啥官方的解释是基于流的自动化构建工具。把运动的半成品看成是数据,那么流动的数据就是流。分工明确才能提高效率,这是社会发展的经验总结。

前端的发展真的是快,前几年还是刀耕火种的开个编辑器,几行html和js代码就能上浏览器跑了。现在呢?各种包,各种库,各种框架,各种编程范式。究其原因,就是我们高中社会课本中那句话

人民日益增长的文质文化需求,同落后的社会生产之间的矛盾

想想也是,以前刀耕火种的编写页面效率非常低,而我国到目前为止网民的数量已经超过7亿了,可想而知对网页数量和多样化的需求巨大,那有什么方法来提高页面的生产效率呢?这就是我今天要讲的基于gulp平台的自动化生产平台。
gulp是啥?官方的解释是基于流的自动化构建工具。好,那什么是流呢?这个流是从英语单词stream翻译过来的,不过还是不好理解。其实可以这么理解,流就是工厂的一个生产车间生产出来的半成品,一个个半成品在输送带上送往下一个加工车间的过程。把运动的半成品看成是数据,那么流动的数据就是流。唉!好难解释啊!还是看代码吧。我已经把代码上传到github了,需要的同学自取,麻烦点个小星星 https://github.com/NicknameID...

1.依赖npm

由于npm在国内比较慢,所以推荐大家使用淘宝的cnpm,在国内访问比较快(搞不懂国家为什么立堵墙,难受)。

2.cnpm init 初始化package.json文件

-y的作用可以跳过询问步骤直接生成默认的package.json文件

3.安装依赖包

由于依赖包太多了,就不一个一个写了 主要通过 cnpm install --save-dev 包的名字的方式来安装的,
下图所列的就是自动化工具要用的包,我已经上传到github上了点击这里获取,
下载后只要 cnpm install就可以了,就会根据package.json里的依赖去下载安装

在package.json中添加gulp字段方便调用本地安装的gulp命令,到这里package.json配置好了

4.gulpfile.js文件的内容(重点

功能1---自动化生成项目目录

//gulpfile.js
/*首先在全局上加载gulp,这个很重要*/
const gulp = require("gulp");
/*在全局上定义项目的目录结构,供应后面使用*/
const dirs = {
  dist:"./dist",
  src: "./src",
  css: "./src/css",
  less: "./src/less",
  js: "./src/js",
  img: "./src/img",
};
gulp.task("create-directory", () => {
  const mkdirp = require("mkdirp"); //这里要依赖mkdirp这个包,通过cnpm 安装
  for (let i in dirs) {
    mkdirp(dirs[i], err => {
      err ? console.log(err) : console.log("mkdir-->" + dirs[i]);;
    });
  }
});
//在终端运行cnpm run gulp create-directory

生成需要生成的项目目录,再也不用每次都去手工创建了,幸福感爆棚有木有!!!

功能2---编译less,并且实现less注入功能,热更新页面,方便开发时调试
这个功能要依赖的插件有

1.gulp-less
2.browser-sync
3.gulp-notify
4.gulp-plumber

/*全局定义要处理的文件*/
const files = {
  lessFiles: "./src/less/go.less",
  cssFiles: "./src/css/*.css",
  jsFiles: "./src/js/*.js",
  imgFiles:"./src/img/*.*"
}
//编译less
gulp.task("compile-less", () => {
const less = require("gulp-less"); //依赖gulp-less的插件
const notify = require("gulp-notify"); 
const plumber = require("gulp-plumber");
const browserSync = require("browser-sync").create(); //browser-sync同步服务器
const reload = browserSync.reload; //将browser-sync的reload方法存起来,方便调用
  return gulp.src(files.lessFiles)
  .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) //使用gulp-notify和gulp-plumber用来阻止因为less语法写错跳出监视程序发生
  .pipe(less())
  .pipe(gulp.dest(dirs.css + "/"))
  .pipe(reload({stream: true}));
});

// 本地服务器功能,自动刷新(开发环境)
gulp.task("server", ["compile-less"],()=>{
const browserSync = require("browser-sync").create();
const reload = browserSync.reload;
  browserSync.init({
    server: "./"
  });
  gulp.watch(dirs.less+"/**/*.less", ["compile-less"]); //监视less文件夹中的所有less文件,有改动就调用compile-less任务编译less
  gulp.watch("./*.html").on("change", reload); //监视html文件,有改动就刷新浏览器
  gulp.watch(dirs.js+"/**/*.js").on("change", reload); //监视所有js文件有改动就刷新浏览器
});
//在cmd运行cnpm run gulp server

可以看到程序正在后台运行,正在监听文件改动

这样就可以左边开着编辑器写代码,右边开着浏览器看效果了,有木有很爽,人生别无他求了(感动中!!!)

功能3---添加浏览器私有前缀
要用到的插件包

1.gulp-postcss
2.gulp-sourcemaps
3.autoprefixer

//添加浏览器私有前缀(生产环境)
gulp.task("autoprefixer", () => {
  const postcss = require("gulp-postcss");
  const sourcemaps = require("gulp-sourcemaps");
  const autoprefixer = require("autoprefixer");
  return gulp.src(files.cssFiles)
    .pipe(sourcemaps.init()) //添加sourcemap,方便调试
    .pipe(postcss([ autoprefixer() ])) //添加浏览器私有前缀,解决浏览器的兼容问题
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest(dirs.css+"/"))
});

功能4---压缩css
要用到的插件包

1.gulp-minify-css
2.gulp-rename

// 压缩css(生产环境)
gulp.task("minify-css", function () {
  const minifyCSS = require("gulp-minify-css");
  const rename = require("gulp-rename");
  return gulp.src(dirs.css+"/**/*.css")
    .pipe(minifyCSS({/*keepBreaks: true*/}))
    .pipe(rename(path=>path.basename += ".min")) //重命名文件输出后的样式为 原文件名.min.css
    .pipe(gulp.dest("./dist/css/"))
});

功能5---合并压缩JavaScript文件
要用到的插件包

1.gulp-concat
2.gulp-uglify
3.gulp-rename

// js文件--合并--压缩(生产环境)
gulp.task("js-concat-compress", (cb)=>{
  let name = ""; //先定义一个变量将用于后面存文件名
  const concat = require("gulp-concat");
  const uglify = require("gulp-uglify");
  const rename = require("gulp-rename");
  return gulp.src(dirs.js+"/**/*.js")
  .pipe(rename(path=>{path.basename += "";name=path.basename;}))
  .pipe(concat("bundle.js"))   //合并js文件
  .pipe(uglify())         //压缩js文件
  .pipe(rename(path=>{
    path.basename = name+"."+path.basename+".min";  //改文件名加上 .min
  }))
  .pipe(gulp.dest("dist/js/")); 
});

功能6---图片无损压缩
要用到的插件包

1.gulp-imagemin

// 图片无损压缩
gulp.task("img-handl",()=>{
  const imagemin = require("gulp-imagemin");
  return gulp.src(files.imgFiles)
    .pipe(imagemin())  //imagemin()里是可以写参数的,有需要的可以去github的页面看看
    .pipe(gulp.dest("./dist/img/"))
});

功能7---项目的打包
有时候我们做完东西需要打包,方便传输,而有些文件又是不需要打包进去的,比如说node_modules文件夹,一键打包的快感体验过绝对会爱上的

依赖的插件包
1.gulp-zip

// 项目打包(生产环境)
gulp.task("zip",()=>{
  const zip = require("gulp-zip");
  return gulp.src(["./*.html","**/dist/**/*.*","!**/node_modules/**/*.*"]) //这里需要注意的是,在写要打包的文件时,避免打包的文件不能写在开头,这里"!**/node_modules/**/*.*"放在了最后
  .pipe(zip("project.zip"))   //打包后的文件名,自己随意取
  .pipe(gulp.dest("./"))
});
5.整理任务执行,方便调用任务

因为gulp执行任务时是以最大的任务并发数同时进行的,所以有时候我们需要按步骤进行,就需要插件gulp-sequence,将任务按顺序写入,就会按顺序执行
写了这么多功能模块,需要好好的整理一下,方便调用。我已经把完整的代码上传到github了,需要的同学自取,麻烦点个小星星 https://github.com/NicknameID...

// ------------------开发阶段命令----------------------------------------------------
gulp.task("start", ["create-directory"]); //项目初始化的第一个命令
gulp.task("dev-watch", ["server"]); //开始编写项目后开启服务器实时更新

// ------------------生产阶段命令------------------------------------------------------
gulp.task("prefixer", ["autoprefixer"]); //给css文件添加浏览器私有前缀 files.cssFiles ==>> .src/css/
gulp.task("min-css", ["minify-css"]); //压缩css文件 files.cssFiles ==>> dist/css/
gulp.task("js-handl", ["js-concat-compress"]); //合js文件  dirs.js/**/*.js ==>> ./dist/js/concated.js
gulp.task("img-handl", ["img-handl"]) //处理图片,对图片进行无损的压缩

//----------------一键生成项目文件命令-----------------------------------------------
       //因为gulp执行任务时是以最大的任务并发数同时进行的,所以有时候我们需要按步骤进行,就需要插件`gulp-sequence`,将任务按顺序写入,就会按顺序执行
const runSequence = require("gulp-sequence").use(gulp);
gulp.task("bunld-project",runSequence("clean-dist","compile-less","autoprefixer","minify-css","js-concat-compress","img-handl","zip"))
6.小结

看到没有,使用gulp其实并没有用到很多本身的API,都是通过不同的插件来实现的处理过程,所以gulp更加像一个处理平台,而非大包大揽的处理程序,他只负责数据的流向,从pipe(管道)的这头流向另外一头,剩下的事情就交给各个插件了,像不像现代社会的细化分工。分工明确才能提高效率,这是社会发展的经验总结。文章有点长,感谢看完的小伙伴!!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84502.html

相关文章

  • 搭建博客太简单,这次我们来做一个博客生成工具

    摘要:代码如下首页的模版博客网站的基本配置菜单生成,这里不讲讲中的遍历,然后生成一个数组默认按发布时间排序置顶替换五集成在编译博客的过程中,一些操作利用会简单快捷许多。 文章较长,耐心读下来我想你肯定会有所收获 : ) 作为一个技术人员,见到别人那光鲜亮丽的个人博客,心里总免不了想搭建自己博客的冲动。当然,搭建博客的方式有好多种,但是大体上分这两种: 服务端数据库例如:你可以用 Word...

    chanthuang 评论0 收藏0
  • 把手教你如何用Crawlab构建技术文章聚合平台(二)

    摘要:上一篇文章手把手教你如何用构建技术文章聚合平台一介绍了如何使用搭建的运行环境,并且将与集成,对掘金进行技术文章的抓取,最后可以查看抓取结果。本篇文章将继续讲解如何利用编写一个精简的聚合平台,将抓取好的文章内容展示出来。 上一篇文章《手把手教你如何用Crawlab构建技术文章聚合平台(一)》介绍了如何使用搭建Crawlab的运行环境,并且将Puppeteer与Crawlab集成,对掘金、...

    zhunjiee 评论0 收藏0
  • webpack 教程资源收集

    学习的过程中收藏了这些优秀教程和的项目,希望对你有帮助。 github地址, 有不错的就更新 官方文档 中文指南 初级教程 webpack-howto 作者:Pete Hunt Webpack 入门指迷 作者:题叶   webpack-demos 作者:ruanyf 一小时包教会 —— webpack 入门指南 作者:VaJoy Larn   webpack 入门及实践 作者:...

    Backache 评论0 收藏0
  • 教你用Vue渐进式搭建聊天室,从JavaScript=>TypeScript

    摘要:前言这个轮子已经有很多人造过了,为了不重复造轮子,我将本项目以三阶段实现大家可以在中的查看纯前端后端前端后端前端希望能给大家一个渐进学习的经验。 前言 Vue+Socket.io这个轮子已经有很多人造过了,为了不重复造轮子,我将本项目以三阶段实现(大家可以在github中的Releases查看): 纯前端(Vuex) 后端+前端(JavaScript) 后端+前端(TypeScrip...

    skinner 评论0 收藏0
  • 把手教你如何用Crawlab构建技术文章聚合平台(一)

    摘要:本文将介绍如何使用和抓取主流的技术博客文章,然后用搭建一个小型的技术文章聚合平台。是谷歌开源的基于和的自动化测试工具,可以很方便的让程序模拟用户的操作,对浏览器进行程序化控制。相对于,是新的开源项目,而且是谷歌开发,可以使用很多新的特性。 背景 说到爬虫,大多数程序员想到的是scrapy这样受人欢迎的框架。scrapy的确不错,而且有很强大的生态圈,有gerapy等优秀的可视化界面。但...

    LinkedME2016 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<