本帖最后由 小鲁哥哥 于 2020-1-8 19:22 编辑
【济南校区】前端就业班笔记流行框架：gulp
ssh方式上传代码
- 公钥 私钥,两者之间是有关联的。
- 生成公钥,和私钥
+ `ssh-keygen -t rsa -C "xiaoming@sina.com"`
在push和pull操作进
- 先pull , 再push
- 当我们在push时，加上-u参数，那么在下一次push时
我们只需要写上`git push`就能上传我们的代码。(加上-u之后，git会把
当前分支与远程的指定的分支进行关联。git push origin master)
npm
- node package manager
- 管理项目的依赖包
- 可以用来下载我们需要使用的东西
- 安装后可以通过`npm -v` 查看版本
npm 使用
- 1.初始化操作
+ `npm init` 会生成一个package.json文件
- 2.下载所需要的包
+ `npm install jquery` 下载jquery
+ 会去 registry.npmjs.org 这个地址下载jquery
+ 会生成一个node_modules目录，下载的内容就放在这个目录
- 3.下载包时，可以加上 `--save` 参数
+ `npm install jquery --save`, 下载之后会在package.json中添加
当前下载的包的版本信息。
gulp
[官网](http://www.gulpjs.com)
[中文网](http://www.gulpjs.com.cn)
前端自动化构建工具
js: function(){//},代码压缩,混淆 : var name = 123,var x = 123
css,
合并: 1个js 1kb ,有10个js.
5个核心方法
- gulp.task('任务名',function(){}) // 创建任务。
- gulp.src('./*.css') 指定想要处理的文件
- gulp.dest() // 指定最终处理后的文件的存放路径
- gulp.watch() // 自动的监视文件的变化，然后执行相应任务。
- gulp.run('任务名')，直接执行相应的任务。
安装gulp
- 通过npm安装:`npm install gulp-cli -g`
gulp使用
- 1.在当前项目中也要安装gulp: `npm install gulp --save`
- 2.还需要在当前项目中新建一个文件: gulpfile.js
[JavaScript] 纯文本查看 复制代码 javascript
var gulp = require('gulp');
// 创建任务
// 第一个参数: 任务名
// 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
gulp.task('test', function(){
console.log(123)
})
- 3.执行任务: `gulp 任务名`
+ 示例: `gulp test`
对js进行压缩
- `npm install gulp-uglify --save`
对js进行合并操作
- `npm install gulp-concat --save`
[JavaScript] 纯文本查看 复制代码 javascript
gulp.task('script', function(){
// 1.要匹配到要处理的文件
// 指定指定的文件:参数是匹配的规则
// 参数也可以是数组，数组中的元素就是匹配的规则
gulp.src(['./app.js','./sign.js'])
// concat 的参数是合并之后的文件名字
.pipe(concat('index.js'))
.pipe(uglify())
// dest方法参数，指定输出文件的路径
.pipe(gulp.dest('./dist'))
})
对css进行压缩操作
- `npm install gulp-cssnano --save`
[JavaScript] 纯文本查看 复制代码 javascript
// 新建一个任务，对css进行处理
gulp.task('style', function(){
// 对项目中的2个css文件进行合并，压缩操作
// 1.匹配到要处理的文件
gulp.src(['./*.css'])
// 2.合并文件
.pipe(concat('index.css'))
// 3.压缩操作
.pipe(cssnano())
// 4.输出到指定目录
.pipe(gulp.dest('./dist'))
})
对html进行压缩
- `npm install gulp-htmlmin --save`
- https://github.com/kangax/html-minifier
[JavaScript] 纯文本查看 复制代码 javascript
// 新建一个任务，对html进行压缩
gulp.task('html', function(){
// 1.匹配到要处理的文件
gulp.src(['./index.html'])
// 2.压缩操作
.pipe(htmlmin({collapseWhitespace:true}))
// 3.指定输出目录
.pipe(gulp.dest('./dist'))
})
gulp.watch
- 监视文件的变化，然后执行相应的任务
- gulp.run, 直接执行指定的任务
[JavaScript] 纯文本查看 复制代码 javascript
// gulp.watch 监视文件变化，执行相应任务
gulp.task('mywatch', function(){
// 执行指定的任务
gulp.run('script')
// 1.监视js文件的变化，然后执行script任务
// 第一个参数：要监视的文件的规则
// 第二个参数：是要执行的任务
gulp.watch(['./app.js','sign.js'],['script'])
})
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！ 黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
