前端自动化工具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_modules\gulp-rev\index.js
第135行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

更改gulp-rev-collector

打开node_modules\gulp-rev-collector\index.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+'**/*.js','!gulpfile.js',buildBasePath+'**/*.css',buildBasePath+'**/*.html'])
        .pipe(replace(repStatic, webSite))
        .pipe(gulp.dest(buildBasePath));
});
//线上使用，替换静态文件为线上地址
gulp.task('repOnlineHtmlDev', function(){
    gulp.src([buildBasePath+'**/*.js','!gulpfile.js',buildBasePath+'**/*.css',buildBasePath+'**/*.html'])
        .pipe(replace(repLocalStatic, webOnlineSite))
        .pipe(gulp.dest(buildBasePath));
});
/********************************************静态替换**************************/

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

//js生成文件hash编码并生成rev-manifest.json文件名对照映射
gulp.task('revJs', 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+'**/*.js',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     (本地开发替换为线上环境)

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