前端自动化工具gulp

前端自动化工具gulp

步骤

配置环境

---

• 安装Node:前往Node.js[官网]下载最新版本(https://nodejs.org/en/) 安装

下载官网node二进制安装包

#下载二进制包
cd /usr/local/src/  
wget https://nodejs.org/dist/v8.11.3/node-v8.11.3-linux-x64.tar.xz  

#解压二进制安装包
tar -xvf node-v8.11.3-linux-x64.tar.xz 

#更改文件名
mv node-v8.11.3-linux-x64 node-v8.11.3 

#配置NODE_HOME，进入profile编辑环境变量
vim /etc/profile

#设置nodejs环境变量，在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTConTROL 一行的上面添加如下内容:

#set for nodejs
export NODE_HOME=/usr/local/src/node-v8.11.3
export PATH=$NODE_HOME/bin:$PATH

#编译重启
source /etc/profile

全局安装gulp

npm install --global gulp

#进入全局安装目录下的gulp包
cd /usr/local/src/node-v8.11.3/lib/node_modules/gulp

安装gulp和gulp插件

# 配置国内镜像
npm config set registry https://registry.npm.taobao.org

# 扩展
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-replace
npm install --save-dev run-sequence

更改gulp-rev

打开node_modulesgulp-revindex.js
第135行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

更改gulp-rev-collector

打开node_modulesgulp-rev-collectorindex.js
第40行 var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新为: var cleanReplacement =  path.basename(json[key]).split('?')[0];

第148行 regexp: new RegExp(  dirRule.dirRX + pattern, 'g' ),
更新为: regexp: new RegExp(  dirRule.dirRX + pattern+'(\?v=\w+)?(\?\w+)?', 'g' ),

第173行 regexp: new RegExp( prefixDelim + pattern, 'g' ),
更新为: regexp: new RegExp( prefixDelim + pattern+'(\?v=\w+)?(\?\w+)?', 'g' ),

根目录新建gulpfile.js

//引入gulp和gulp插件
var gulp = require('gulp');
var rev = require('gulp-rev');
var replace = require('gulp-replace');
var revCollector = require('gulp-rev-collector');
var runSequence = require('run-sequence');


var buildbasePath = '../zixun_h5/';//构建输出的目录
var revPath = 'rev/';//版本号更改映射地址,必填


var repStatic = 'static-1256413295.cos.ap-guangzhou.myqcloud.com';//替换前的地址
var webSite = 'm.dev.zixun.com/Static';//替换后的地址

var repLocalStatic = 'm.dev.zixun.com/Static';//开发地址->替换前的地址
var webonlineSite = 'static-1256413295.cos.ap-guangzhou.myqcloud.com';//线上地址->替换后的地址


//开发使用，替换静态文件为开发地址
gulp.task('repLocalHtmlDev', function(){
    gulp.src([buildbasePath+'***.css',buildbasePath+'***.js','!gulpfile.js',buildbasePath+'***.html'])
 .pipe(replace(repLocalStatic, webOnlineSite))
 .pipe(gulp.dest(buildbasePath));
});


//CSS生成文件hash编码并生成rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
    return gulp.src([buildbasePath+'***.js'])
 .pipe(rev())
 .pipe(rev.manifest())
 .pipe(gulp.dest(revPath+'js'));
});

//Html替换css、js文件版本
gulp.task('revHtml', function(){
    return gulp.src(['rev*.json',buildbasePath+'***.css',buildbasePath+'**/*.html'])
 .pipe(revCollector())
 .pipe(gulp.dest(buildbasePath));
});

//替换->本地开发
gulp.task('default', function (done) {
    condition = false;
    runSequence(
 ['repLocalHtmlDev'],
 done);
});
//替换->线上环境
gulp.task('online', function (done) {
    condition = false;
    runSequence(
 ['repOnlineHtmlDev'],
 done);
});
//版本号
gulp.task('rev', function (done) {
    condition = false;
    runSequence(
 ['revCss'],
 ['revJs'],
 ['revHtml'],
 done);
});

解决 Local gulp not found in(项目调用全局)

第1步：先cd到项目目录中，使用以下命令，回车即可：'npm link gulp' 
第2步：配置node相关的环境变量，即node_modules的安装目录：使用以下命令：npm root -g 获得安装路径，然后 vi ~/.bash_profile 添加两行： 

export NODE_PATH=/usr/local/src/node-v8.11.3/lib/node_modules/gulp/node_modules (替换命令获取的路径,注意路径下是否为gulp扩展,否则路径不对)
export PATH=$NODE_PATH/bin:$PATH

第3步：:wq保存并退出，编译~/.bash_profile 使配置生效
source ~/.bash_profile

如需php执行gulp命令需填写gulp绝对路径

which gulp

解决 /usr/bin/env: node: No such file or directory(配置软链)

ln -s 'gulp绝对路径' /usr/bin/node

例：ln -s /usr/local/src/node-v8.11.3/bin/node /usr/bin/node

• 注意 : 如需php执行gulp，安装项目依赖，不安装全局

进入项目，安装项目的开发依赖（devDependencies）

npm install --save-dev gulp

运行命令

gulp     (线上替换为本地开发环境) 
gulp rev (更新文件版本号)
gulp online     (本地开发替换为线上环境)

#每个命令之间用&&隔开：若前面的命令执行成功，才会去执行后面的命令。这样可以保证所有的命令执行完毕后，执行过程都是成功的。