个人博客
错误的地方请指出,谢谢
npm
- 官网[https://www.npmjs.com]
- node package manager
- 命令:
- 初始化:
npm init
- 安装指定包:
npm install jquery --save
- 删除指定包:
npm remove jquery --save
- 下载安装package.json中dependencies属性对应的文件:
npm install --production
- 初始化:
browser-sync
- 更改代码之后自动刷新浏览器
- 需要使用npm进行全局安装:
npm install browser-sync -g
,-g表示安装到全局 - 使用:
browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*"
- –files参数指定要监视的文件,后面跟要监视的文件的文件路径以逗号分隔。
gulp
前端自动化构建工具
js压缩,var x,xname,混淆
合并.
css压缩
html压压缩grunt ,webpack…
核心的5个方法
- task,gulp中是一个个任务的形式来实现功能。
- task(‘任务名’,function(){
…..
});
- 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对象
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']);
})
gulp的一些插件
- 也是使用npm安装
- 对js代码进行压缩 gulp-uglify
- 对代码进行合并 gulp-concat
- 对css进行压缩 gulp-cssnano
- 对html进行压缩 gulp-htmlmin
gulp-less 的使用
可以参考知乎的文章:
https://zhuanlan.zhihu.com/p/20903085
最全指南:
gulp入门指南