@羯瑞 整理
前言
前端工具现在层出不穷, 网上搜下一大片, 就看你怎么去使用了, 基于项目看用什么样的构建工具. 有的工具提供的功能还是非常强大的.
FIS. 百度团队的产品. 现在百度的多个产品中使用. 面向前端的工程构建工具. 解决前端工程中性能优化, 资源加载 (异步, 同步, 按需, 预加载, 依赖管理, 合并, 内嵌), 模块化开发, 自动化工具, 开发规范, 代码部署等问题. 学习成本相对比较高. 官网 http://fis.baidu.com/
CodeKit. 自动编译 Less, Sass, Stylus, CoffeeScript, Jade & Haml 等文件致力于 JS 文件合并和压缩, 以及 JS 语法错误检查同时还支持 Compass(Sass 伴侣). 这个只是知道而已没去深究, 貌似百度搜文文章也不多. 官网 http://codekitapp.com/
yeoman.Google 的团队和外部贡献者团队合作开发的, 他的目标是通过 Grunt(一个用于开发任务自动化的命令行工具) 和 Bower(一个 html,CSS,JavaScript 和图片等前端资源的包管理器) 的包装为开发者创建一个易用的工作流. 官网 http://yeoman.io/
Bower. 一个客户端技术的软件包管理器, 它可用于搜索, 安装和卸载如 JavaScript,HTML,CSS 之类的网络资源. 其他一些建立在 Bower 基础之上的开发工具, 如 YeoMan 和 Grunt. 官网 http://bower.io/
webpack. 一款模块加载器兼打包工具, 它能把各种资源, 例如 JS(含 JSX),coffee, 样式 (含 Less/Sass), 图片等都作为模块来使用和处理. 官网 http://webpack.github.io/
有兴趣的可以去了解下, 上面的我也是一知半解的.
本文主角
构建工具大多都是居于 Node.JS 下的.
说起 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 是随同 Node.JS 一起安装的包管理工具, 装了 node 会默认装上 NPM 工具.### 前言
前端工具现在层出不穷, 网上搜下一大片, 就看你怎么去使用了, 基于项目看用什么样的构建工具. 有的工具提供的功能还是非常强大的.
安装 gulp 之前, 先安装 Node.JS 环境, 因为 gulp 是基于 Node.JS 的前端构建工具. Windows 平台下直接安装, 一直下一步就行. 百度搜下 node 官网就下得到安装包.
全局安装 gulp.cmd 模式下执行下面代码,--global 全局安装.
NPM install --global gulp
在开发项目上, 安装项目依赖. 如果 gulp 全局安装了, 就不会再重新下载了. 此操作会在项目目录中生成一个 package.JSON 依赖文件.--save 生产环境,-dev 开发环境. 一般两者都会一起用. 这个在 package.JSON 可以看出来区别.
NPM install --save-dev gulp
在项目中新建 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');
- });
上面的注释都写的很清楚了, 就不多阐述了. 相关的可以去 NPM 官网搜索相关插件看下具体的用法就行了.
一些问题
协同开发怎么共用 gulp
package.JSON 文件里写的插件依赖就派上用场了. 在项目中直接执行下面代码就可以自动全部安装依赖插件了:
NPM install
NPM 下载缓慢
可以使用淘宝镜像具体用法移步:> 淘宝 NPM 镜像 https://npm.taobao.org/
- // 临时安装
- 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
来源: https://www.cnblogs.com/chenrf/p/10036284.html