搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 前端读者 > 19前端 | 前端构建工具Gulp

19前端 | 前端构建工具Gulp

前端读者 2018-06-28

前言

前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具。有的工具提供的功能还是非常强大的。

  • FIS。百度团队的产品。现在百度的多个产品中使用。面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。学习成本相对比较高。官网

  • CodeKit。自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件致力于js文件合并和压缩,以及js语法错误检查同时还支持Compass(Sass伴侣)。这个只是知道而已没去深究,貌似百度搜文文章也不多。官网

  • yeoman。Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。官网

  • Bower。一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt。官网

  • webpack。一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。官网

有兴趣的可以去了解下,上面的我也是一知半解的。

本文主角

构建工具大多都是居于nodejs下的。说起gulp,就不得说下grunt。相信  很多小伙伴都会在网上看到它俩在一起的。下面是摘抄网上的对比:

  • 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。

  • 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件。

  • 高质量 Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。目前官方列出的有673个插件。

  • 易学 Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。

  • 流 使用Grunt的I/O过程中会产生一些中间态的临时文件,一些任务生成临时文件,其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理,通过管道将多个任务和操作连接起来,因此只有一次I/O的过程,流程更清晰,更纯粹。

  • 代码优于配置 维护Gulp更像是写代码,而且Gulp遵循CommonJS规范,因此跟写Node程序没有差别。

gulp安装

先来说下npm工具,npm是随同NodeJS一起安装的包管理工具,装了node会默认装上npm工具。### 前言
前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具。有的工具提供的功能还是非常强大的。

  1. 安装gulp之前,先安装nodejs环境,因为gulp是基于nodejs的前端构建工具。window平台下直接安装,一直下一步就行。百度搜下node官网就下得到安装包。

  2. 全局安装gulp。cmd模式下执行下面代码,--global全局安装。

npm install --global gulp
  1. 在开发项目上,安装项目依赖。如果gulp全局安装了,就不会再重新下载了。此操作会在项目目录中生成一个package.json依赖文件。--save生产环境,-dev开发环境。一般两者都会一起用。这个在package.json可以看出来区别。

npm install --save-dev gulp
  1. 在项目中新建gulpfile.js文件,写流程代码。下面是项目中用到的:

// 载入插件
var gulp = require('gulp'),
   browserSync = require('browser-sync').create(),//浏览器刷新工具
   imagemin = require('gulp-imagemin'),//图片压缩
   tinypng = require('gulp-tinypng-nokey');//tinypng图片压缩
   minifycss = require('gulp-minify-css'),//css压缩
   uglify = require('gulp-uglify'),//js压缩
   jshint = require('gulp-jshint'),//js语法检测
   rename = require('gulp-rename'),//重命名
   gclean = require('gulp-clean'),//清除文件
   cache = require('gulp-cache'),//获取文件cache
   minimist = require('minimist');//截取传参

/**
* 默认参数:vurl(模版路径),wurl(静态资源路径),ourl(输出路径)
* imagemin: 图片压缩,已经舍弃。压缩效果不怎么好,支持全部图片格式
* clean: 清除输出文件夹,防止输出的东西重叠,或者可以自定义不同文件夹的名称
* server: 实时刷新测试,自定义域名,自定义监听模版文件和静态资源
* picmin: 图片压缩基于tinypng,压缩率高,质量好。仅支持png,jpg。api请求所以会慢点
* cssmin: css文件压缩
* jsmin: js文件压缩
* allmin: cssmin+jsmin+picmin
*
* 优化内容:都自定义传递参数路径,符合我们一个系统多个站点的痛点;优化内存占用;引入缓存机制
* gulp imagemin --wurl ffsm/baobaoqm
* gulp clean --ourl aa_gulp_out
* gulp server --host dev.d1xz.net --vurl ffsm/view/qf --wurl ffsm/qf/diandeng
* gulp picmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
* gulp cssmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
* gulp jsmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
* gulp allmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
*/


var viewUrl='d1xz/shuipf/application/';
var wwwUrl='d1xz/www/statics/';

// 获取配置参数
var options = minimist(process.argv.slice(2));
//IMG压缩 支持GIF、PNG、JPG压缩率不高
gulp.task('imagemin',['clean'],function(){
   if(options.wurl){
       var thisUrl = wwwUrl+''+options.wurl;
       var outUrl = options.ourl?options.ourl:thisUrl;
       console.log('压缩地址路径:'+thisUrl);
       console.log('输出地址路径:'+outUrl);
       gulp.src([wwwUrl+''+options.url+'/*.{gif,png,jpg,jpeg}',wwwUrl+''+options.url+'/**/*.{gif,png,jpg,jpeg}'])
       .pipe(imagemin())
       .pipe(gulp.dest(outUrl));
   }else{
       console.log('配置参数错误;例:gulp imagemin --wurl ffsm/baobaoqm');
   }  
});
// 清除输出文件
gulp.task('clean', function() {
   if(options.ourl){
       return gulp.src(options.ourl, {read: false}).pipe(gclean());
   }else{
       console.log('配置参数错误;例:gulp clean --ourl aa_gulp_out');
   }
});
//HTML实时预览
gulp.task('server', function() {
   console.log('为减少系统cpu、内存占用,请写全路径;');
   if(options.host){
       browserSync.init({
           proxy:options.host,//动态域名
           notify: false,//刷新是否提示
           open: true,//是否自动打开页面
           timestamps: true
       });
       //监听文件变化数组
       var vurl=viewUrl+''+options.vurl;
       var wurl=wwwUrl+''+options.wurl;
       console.log('监听模版文件路径:'+vurl);
       console.log('监听静态文件路径:'+wurl);
       gulp.watch([vurl+'/*.*',vurl+'/**/*.*',wurl+'/*.*',wurl+'/**/*.*']).on("change", browserSync.reload);
   }else{
       console.log('配置参数错误;例:gulp server --host dev.d1xz.net --vurl ffsm/view/qf --wurl ffsm/qf/diandeng');
   }

});
// 图片压缩tinypng,api请求速度会慢点;只能压缩PNG和JPG
gulp.task('picmin', function () {
   if(options.wurl){
       var thisUrl = wwwUrl+''+options.wurl;
       var outUrl = options.ourl?options.ourl:thisUrl;
       console.log('压缩地址路径:'+thisUrl);
       console.log('输出地址路径:'+outUrl);
       gulp.src([thisUrl+'/*.{png,jpg,jpeg}',thisUrl+'/**/*.{png,jpg,jpeg}','!'+thisUrl+'/layer/**/*.{png,jpg,jpeg}'])
           .pipe(cache(tinypng()))
           .pipe(gulp.dest(outUrl));
   }else{
       console.log('配置参数错误;例:gulp picmin --wurl ffsm/baobaoqm');
   }
});
// css压缩
gulp.task('cssmin', function() {
   if(options.wurl){
       var thisUrl=wwwUrl+''+options.wurl;
       var outUrl = options.ourl?options.ourl:thisUrl;
       console.log('压缩地址路径:'+thisUrl);
       console.log('输出地址路径:'+outUrl);
       gulp.src([thisUrl+'/*.css',thisUrl+'/**/*.css','!'+thisUrl+'/**/*.min.css','!'+thisUrl+'/**/layer/**/*.css','!'+thisUrl+'/**/layui/**/*.css','!'+thisUrl+'/**/layer_mobile/**/*.css','!'+thisUrl+'/**/layer_mobile/**/*.css',,'!'+thisUrl+'/**/swiper/**/*.css','!'+thisUrl+'/**/swiper/**/*.css','!'+thisUrl+'/**/libs/**/*.css','!'+thisUrl+'/**/libs/*.css'])
       .pipe(minifycss())  //执行压缩
       .pipe(rename({suffix: '.min'}))   //重命名
       .pipe(gulp.dest(outUrl));  //输出文件夹
   }else{
       console.log('配置参数错误;例:gulp cssmin --wurl ffsm/baobaoqm');
   }
});
// js压缩
gulp.task('jsmin', function() {
   if(options.wurl){
       var thisUrl=wwwUrl+''+options.wurl;
       var outUrl = options.ourl?options.ourl:thisUrl;
       console.log('压缩地址路径:'+thisUrl);
       console.log('输出地址路径:'+outUrl);
       gulp.src([thisUrl+'/**/*.js',thisUrl+'/*.js','!'+thisUrl+'/**/*.min.js','!'+thisUrl+'/**/layer/**/*.js','!'+thisUrl+'/**/layui/**/*.js','!'+thisUrl+'/**/require/**/*.js','!'+thisUrl+'/**/require/*.js','!'+thisUrl+'/**/layer_mobile/**/*.js','!'+thisUrl+'/**/layer_mobile/**/*.js','!'+thisUrl+'/**/swiper/**/*.js','!'+thisUrl+'/**/swiper/**/*.js','!'+thisUrl+'/**/libs/**/*.js','!'+thisUrl+'/**/libs/*.js'])
       .pipe(jshint())
       .pipe(uglify())  //执行压缩
       .pipe(rename({suffix: '.min'}))   //重命名
       .pipe(gulp.dest(outUrl));  //输出文件夹
   }else{
       console.log('配置参数错误;例:gulp jsmin --wurl ffsm/baobaoqm');
   }
});
// 全部压缩
gulp.task('allmin', function(){
   gulp.start('cssmin', 'jsmin', 'picmin');
});
  1. 上面的注释都写的很清楚了,就不多阐述了。相关的可以去npm官网搜索相关插件看下具体的用法就行了。

一些问题

  • 协同开发怎么共用gulp
    package.json文件里写的插件依赖就派上用场了。在项目中直接执行下面代码就可以自动全部安装依赖插件了:

npm install
  • npm下载缓慢

可以使用淘宝镜像具体用法移步:>淘宝npm镜像

//临时安装
npm --registry https://registry.npm.taobao.org install express
//持久安装(替换npm的源地址)
npm config set registry https://registry.npm.taobao.org
//安装cnpm(推荐)
npm install -g cnpm --registry=https://registry.npm.taobao.org


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《19前端 | 前端构建工具Gulp》的版权归原作者「前端读者」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注前端读者微信公众号

前端读者微信公众号:fe_duzhe

前端读者

手机扫描上方二维码即可关注前端读者微信公众号

前端读者最新文章

精品公众号随机推荐