npm
- 官网[https://www.npmjs.com]
- node package manager
- 命令:
- 初始化：
npm init - 安装指定包：
npm install jquery --save - 删除指定包：
npm remove jquery --save - 下载安装package.json中dependencies属性对的文件:
npm install --production - 换源：
npm config set registry https://registry.npm.taobao.org- 或者使用cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 初始化：
browser-sync
- 更改代码之后自动刷新浏览器
- 需要使用npm进行全局安装:
npm install browser-sync -g,-g表示安装到全局 - 使用:
browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*" - –files参数指定要监视的文件，后面跟要监视的文件的文件路径以逗号分隔。
- cmd数据
------------------------------------
Local: http://localhost:3000 //访问地址
External: http://172.20.10.3:3000
------------------------------------
UI: http://localhost:3001 //后台地址
UI External: http://172.20.10.3:3001
------------------------------------
gulp
-
前端自动化构建工具 js压缩,var x,xname，混淆 合并. css压缩 html压压缩
-
grunt ,webpack…
核心就5个方法
- task,gulp中是一个个任务的形式来实现功能。
- task(‘任务名’,function(){ ….. });
- src
- src(‘./*.js’)
- dest(‘./minjs/’)// 指定处理后的文件的输出路径.
- watch(‘./*.js’,[‘任务名1’,’任务名2’]);
- run(‘任务名’);//执行指定的任务.
gulp的安装
- 使用npm 进行安装
npm install gulp-cli -g;
gulp 使用
使用时还需要在项目中通过npm非全局安装gulp
npm install gulp --save-dev
还需要在当前项目根目录添加一个gulpfile.js文件来写具体的任务代码.
gulp的一些插件
- 也是使用npm安装
- 对js代码进行压缩 gulp-uglify
- 对代码进行合并 gulp-concat
- 对css进行压缩 gulp-cssnano
- 对html进行压缩 gulp-htmlmin
// 得到gulp对象
var gulp = require('gulp');
// 引入gulp-uglify插件，只是用来压缩，混淆
var uglify = require('gulp-uglify');
// 合并,即能合并js,也能合并css
var concat = require('gulp-concat');
// 用来对css进行压缩操作的插件
var cssnano = require('gulp-cssnano');
// 引用gulp-htmlmin对html进行压缩
var htmlmin = require('gulp-htmlmin');
// 1.新建任务
gulp.task('script',function(){
// 这里写任务具体需要做的事情.
// 2.匹配到app.js文件,如果使用多个规则，需要以数组的形式来书写第一个参数，数组中的每一个元素都是一个规则。
gulp.src(['./app.js','./signIn.js'])
.pipe(concat('all.js'))
// 压缩，混淆
.pipe(uglify())
.pipe(gulp.dest('./dist'))
// 输出到指定目录
});
// 新建对css进行处理的任务.
gulp.task('style',function(){
// 匹配css文件
gulp.src(['./style.css','./signIn.css'])
.pipe(concat('all.css')) // 需要指定一个名字，作为压缩后文件的文件名
.pipe(cssnano())
.pipe(gulp.dest('./dist'))
});
// 压缩html任务
gulp.task('html',function(){
// 匹配html文件
gulp.src('./index.html')
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest('./dist/'));
});
// 单独创建任务来监视文件变化
gulp.task('watch',function(){
// 监视文件变化，并调用指定任务处理代码
// 使用多个规则用数组,第二个参数，是想要执行的任务
gulp.watch(['./app.js','./signIn.js'],['script']);
})