0%

入门指南在这里gulp入门教程

开始

1
2
npm i -g gulp        // 全局安装gulp
npm i gulp --save // 在项目中安装gulp

在项目根目录下创建一个gulpfile.js文件,写入以下代码

1
2
3
4
5
6
7
8
9
const gulp = require('gulp');

const input = 'lib/',
output= 'build/';

gulp.task('default', function () {
return gulp.src(input + 'js/*.js')
.pipe(gulp.dest(output + 'js'));
});

gulp 会执行名称为“default”的任务

然后在终端输入gulp,执行完毕之后,lib/js/下的所有js文件会被写入到build/js/目录之下

这是gulp基本的功能,如果需要其他功能要安装gulp插件。

插件

gulp提供了许多插件来实现各种功能

1
npm i gulp-ruby-sass gulp-babel gulp-autoprefixer gulp-minify-css gulp-uglify gulp-rename gulp-notify gulp-sourcemaps del vinyl-paths babel-preset-es2015 --save

执行上面这条代码,安装所需插件

gulp-autoprefixer: 可以添加css兼容前缀

gulp-notify: 用来输出log信息

vinyl-paths: 用来获取 stream 中每个文件的路径

配置

我们先来写一个可以转换es6代码并压缩的task

1
2
3
4
5
6
7
8
9
10
11
12
13
14
gulp.task('scripts', function () {
return gulp.src(input + 'js/*.js')
.pipe(rename({
suffix: '.min'
}))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(gulp.dest(output + 'js'))
.pipe(notify({
message: 'Scripts task complete'
}));
});

第一个pipe:将要输入的文件名后缀添加上 .min

第二个pipe:转换es6代码

第三个pipe:压缩js代码

第四个pipe:将处理完毕的js代码写到输出目录

第五个pipe:输出log信息


再写一个处理css文件的task

1
2
3
4
5
6
7
8
9
10
11
12
gulp.task('sass', function () {
return sass(input + 'css/*.scss')
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest(output + 'css/'))
.pipe(notify({
message: 'Sass task complete'
}));
});

gulp-ruby-sass:sass()需要传入转换的scss文件路径才能执行,所以不是再使用gulp.src() 来获取目标文件了

第一个pipe:添加css兼容前缀

第二个pipe:重命名

第三个pipe:压缩

第四个pipe:写出文件

第五个pipe:输出log信息

gulp-sass:可以使用gulp.src()来获取目标文件,具体如下

1
2
3
4
...
return gulp.src(input + 'css/*.scss')
.pipe(sass())
...

处理js和css的task写好了之后,我们需要在写出文件之前先删除之前的旧文件

1
2
3
4
gulp.task('clean', function (cb) {
return gulp.src(output)
.pipe(vinylPaths(del));
});

第一个pipe:vinylPaths获取需要删除文件的路径,并传入del

然后修复default的task

1
2
3
gulp.task('default', ['clean'], function () {
gulp.start('sass', 'styles', 'scripts');
});

第二个参数为先执行的task名称,这里要注意一点,摘自gulp中文网

注意: 你的任务是否在这些前置依赖的任务完成之前运行了?请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式:使用一个 callback,或者返回一个 promise 或 stream。

###注意事项

  1. 在macos中,目录名的大小写是敏感的,如果不注意可能会导致watch功能的失效。
    :)

经过一天的摸索与尝试,参考了网上大部分的教程,终于把基本功能搞定了。在Google搜索了很多关键字,都没有找到一篇完整的面向初学者的教程(可能是本人的疏忽),所以借此来记录一下自动部署的流程与踩到的坑。

安装

因为Jenkins使用Java编写,所以需要安装java环境

1
sudo yum install java

安装Jenkins之前要先添加Jenkins库

1
wget -O /etc/yum.repos.d/jenkins.repo http://jenkins-ci.org/redhat/jenkins.repo
1
rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

然后再安装Jenkins

1
sudo yum install jenkins

安装完成之后启动Jenkins

1
sudo service jenkins start

Jenkins默认会在8080端口运行,如果8080端口被占用,可以修改Jenkins的配置文件

/etc/sysconfig/jenkins

修改 JENKINS_PORT 的值,然后重启jenkins即可

1
sudo service jenkins restart

注意

阿里云的服务器可能出现jenkins启动成功后无法访问的情况,是因为阿里云对服务器的部分端口进行了限制导致的。建议将jenkins端口修改为 10000 - 10050 之间的端口,比如 10001

启动配置

浏览器中访问IP:PORT,会出现“解锁”jenkins的界面,进入页面中给出的路径,找到密码,输入到页面中的输入框中,解锁jenkins。

解锁成功后,会出现选择安装插件的界面

chajian.png

我们选择【选择插件来安装】,默认会勾选一些插件,我们可以取消选择这些插件来安装我们需要的插件。

搜索【git】并勾选【git】和【gitlab】,然后点击安装。

安装后会跳转到创建用户界面,填写信息并保存完成。

gitlab hook

进入jenkins管理插件界面,搜索 【hook】,找到gitlab hook勾选安装,完成后重启jenkins。jenkins-2.png

SSH

在终端输入 ssh-keygen -t rsa -C 'Your email' 生成秘钥和公钥。

将秘钥复制到jenkins中

进入Credentials - System - Add domain页面。

jenkins-3.png

在Domain Name中输入www.gitlab.com,然后点击OK,之后在左侧菜单中点击add credentials

Kind选择SSH Username with private key

Username输入git Name

Private Key 选择Enter directly,然后把刚才生成的秘钥输入进去,点击OK

jenkins-4.png

将公钥复制到gitlab中

User - setting - SSH Keys

自动构建

在左侧菜单中选择【新建任务】,输入任务名,选择【构建一个自由风格的软件项目】,点击确认。

在【源码管理】栏目,选择【git】,Repository URL输入gitlab项目地址,Credentials选择刚才新建的Credentials。

在【构建触发器】栏目,勾选【Build when a change is pushed to GitLab】,点击【高级】之后,点击【generate】按钮生成token。记录【GitLab webhook URL】和【Secret token 】的值。

在【构建】栏目,选择【增加构建步骤】- 【执行shell】,在【命令】中输入shell构建代码。

点击保存。

构建shell

如果顺利的话,向gitlab提交代码,会触发jenkins的构建代码。在触发构建代码之前,jenkins会先clone项目代码,按照默认配置,代码会clone在/var/lib/jenkins/workspace

我使用的web服务器是 Nginx,web根目录在/usr/share/nginx/html

我的部署shell代码比较简单粗暴(不会~)。

1
2
3
4
5
6
# 进入jenkins工作目录
cd /var/lib/jenkins/workspace
# 删除web服务目录文件
rm -r -f /usr/share/nginx/html/jenkins/workspace/gitlab-test
# 拷贝jenkins工作目录中的代码到web服务目录
cp -R gitlab-test /usr/share/nginx/html/jenkins/workspace

webhooks

还有关键的一步,就是设置gitlab的webhooks。

进入gitlab项目 - setting - Integrations

将刚才配置构建时保存的GitLab webhook URLSecret Token填入保存,然后点击Test,测试。

如果成功,页面会出现提示 HTTP 200

如果失败,需要到jenkins管理界面 - 系统管理 - 全局安全设置 - CSRF Protection中,取消勾选【防止跨站点请求伪造】即可。

获取root权限

为jenkins获取root权限

1
gpasswd -a root jenkins

修改/etc/sysconfig/jenkins文件

1
2
JENKINS_USER=root
JENKINS_GROUP=root

重启jenkins

1
service jenkins restart

npm command not found

再构建中执行shell时,会提示npm command not found
可以在插件管理中安装nodejs插件
系统管理 - 全局工具配置 - nodejs中配置保存
然后在项目构建配置中勾选node

之前写的图片轮播,在手机端的微信和QQ的内置浏览器中一直都有bug。

bug如下:

1.手指滑动图片时有点卡顿。

2.松开手指后,图片会闪动一下(显示白色),再继续滑动,但是这样的滑动没有卡顿。

这个问题首先让我想到的就是滑动图片用的方法。我是用translateX来移动图片的,但是我改用改变left值也是一样的问题,所以我就想到是不是js代码哪里有问题呢。

我google了这个问题,发现有个人和我的问题类似,是两个月前的,现在看他的代码发现已经解决了。

然后我就对比我俩的代码,发现没什么特别的地方,改了一些地方,但是都没有效果。。。。我也引用了他的js代码,但是依然有bug。

后来我就从css代码上入手,发现了这样的一条代码

1
backface-visibility: hidden;  

是放在ul中的,写入之后,两个bug都解决了。。。

MDN:backface-visibility 属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的,当其朝向观察者时,显示正面的镜像。

如下图,图片来自MDN。
backface-visibility.png
加上该样式之后问题解决。

该方法只适用于Windows

1.下载Chrome策略组模板 链接: https://pan.baidu.com/s/1boMMC2b 密码: rdsk

2.打开Windows策略组,Win+R,运行gpedit.msc。

3.【计算机配置】->【管理模板】右击【添加/删除模板】,添加刚才下载的adm文件。

4.添加成功后,会在【管路模板】->【经典管理模板】下出现【Google】,打开【Google】->【Google Chrome】(不是推荐的那个文件夹),选中后在右边的设置中找到【扩展程序】并双击。

5.双击打开【配置扩展程序安装白名单】->【已启用】->选项 -> 【显示】,在打开的窗口中输入需要加入白名单的扩展程序ID(扩展程序必须先打包成crx文件,拖入chrome安装)

之前写的项目中要向服务器发送时间戳,来保存当前文本创建的时间,但是发送到服务器的时间和读取服务器返回的时间对不上。

然后去调试代码,全都是对的,但就是和服务器的时间差了一天。后来去问老大,老大想了一下说应该是时区的问题。

看服务器发回来的时间戳就是和自己的不一样,在后面多了一个+号和几个数字,但是都没在意。

服务器的时间戳 1471795200+0800

发送上去的时间戳 1471881600