手记

前端自动化工具gulp

前端自动化工具gulp


步骤

配置环境

下载官网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     (本地开发替换为线上环境)

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

0人推荐
随时随地看视频
慕课网APP