基于流的前端自动化构建工具,利用吞咽可以提高前端开发效率,特别是在前后端分离的项目中。使用杯能完成以下任务:
<李>压缩html、css和js李
<李>编译少或sass等李
<李>压缩图片
<李>启动本地静态服务器李
<李>其他李
<李>一键安装项目所有的依赖模块李
<李>一键安装项目所有的依赖库李
<李>代码检查确保严格语法正确李
<李>能将angularjs的html装换成js模块并且压缩到js文件中李
<李>将所有css文件合并压缩李
<李>将所有的js文件合并压缩李
<李>动态引入资源文件
<李>拥有开发环境和生产环境两种打包方式李
<李> npm基于节点的包管理器李
<李>杯基于节点文件流的构建系统李
<李>鲍尔是Web开发中的一个前端文件包管理器李
<强> 1,一键安装项目所有的依赖模块
创建项目使用命令(项目目录下)
npm init//生成package.json
{
“名称”:“leason”,
“版本”:“1.0.0”,
“描述”:“测试角和吞咽和单元测试”,
“主要”:“gulpfile.js”,
“依赖”:{
},
" devDependencies ": {
},
"脚本":{
“测试”:“echo \”的错误:没有测试指定\”,,退出1”
},
“库”:{
},
“关键词”:[
“leason”
),
“作者”:“leason”,
“许可证”:“ISC”,
“虫子”:{
},
}
npm安装依赖模块采用命令
npm安装xxx——保存//保存到依赖项(生产)
npm安装xxx——save-dev//保存到devDependencies(开发)
package.json中保存相应模块,项目重新部署只需要命令
npm安装//安装包中所有模块
一键安装项目所有的依赖模块使用鲍尔管理器,用法和npm类似
<强> 2,语法检查
npm安装gulp-jshint——save-dev
//代码语法检查命令——大口jshint
var jshint=要求(“gulp-jshint”);//代码检查
饮而尽。任务(jshint,函数(){
返回gulp.src (paths.js)
.pipe (jshint ())
.pipe (jshint.reporter(“违约”));
});
转换html为js模块
npm安装gulp-angular-templatecache——save-dev
//合模并html板命令——大口模板
var templateCache=要求(“gulp-angular-templatecache”);
饮而尽。任务(“模板”功能(){
返回gulp.src (['。//* */* . html模板”,“。/模板/* . html”))
.pipe (templateCache({模块:“模板”}))
.pipe (gulp.dest (’。/js '))
});
<强> 3,将所有css文件合并压缩
npm安装gulp-cssmin——save-dev
//合并压缩css命令——大口deployCSS
var cssmin=要求(“gulp-cssmin”);
饮而尽。任务(deployCSS,函数(){
返回gulp.src (paths.css)
.pipe (cssmin ())
.pipe (concat (all.css))
.pipe (gulp.dest(’。/构建'));
});
<强> 4,将所有js文件合并压缩
npm安装gulp-uglify——save-dev//压缩
npm安装gulp-concat——save-dev//合并
npm安装gulp-sourcemapsy——save-dev//处理JavaScript时生成SourceMap
npm安装gulp-strip-debug——save-dev//去除打印
//测试生产两种js压缩命令——生产大口js -刺激测试杯js - dev
饮而尽。任务(js,函数(类型){
console.log(类型);
如果(type==dev) {//dev
返回gulp.src (paths.js)
.pipe (concat (all.js))
.pipe (gulp.dest(’。/构建'));
}{//刺激
返回gulp.src (paths.js)
.pipe (sourcemaps.init ())
.pipe (stripDebug ())
.pipe(糟蹋())
.pipe (concat (all.min.js))
.pipe (sourcemaps.write ())
.pipe (gulp.dest(’。/构建'));
}
});
<强> 5,根据现有文件想指数中引入
