首页 > 代码库 > web 环境搭建00前端自动化构建工具(gulp)
web 环境搭建00前端自动化构建工具(gulp)
web 环境搭建----前端自动化构建工具(gulp):
1----先下载安装node.js
2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件)
3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev
(根据依赖文件下载gulp插件)
4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文件,文件
中有项目名称,版本,描述依赖关系文件等}
5----项目中新建js文件:gulpfile.js(自己写文件名只能是gulpfile.js)
6----在项目文件夹目录中下载相关插件:
命令行:
npm instal gulp-connect --save-dev- (下载服务器插件列表)
npm instal gulp-uglify --save-dev- (下载压缩js插件)
npm instal gulp-minify-css --save-dev- (下载压缩css插件)
npm instal gulp-imagemin --save-dev- (下载压缩图片插件)
npm instal gulp-minify-html --save-dev- (下载压缩html插件)
npm instal gulp-less --save-dev- (下载压缩less插件)
7----在gulpfile.js文件中写入js代码:
文件内容:
var gulp=require("gulp") //根插件
var connect=require("gulp-connect") //服务器插件
var uglify=require("gulp-uglify") //压缩js文件
var minifycss=require("gulp-minify-css") //压缩css文件
var minimg=require("gulp-imagemin") //压缩图片文件
var minhtml=require("gulp-minify-html") //压缩html文件
var less=require("gulp-less") //压缩less文件
//创建任务
/*1、创建任务 task
* 2、找到目标文件 src
* 3、在pipe中执行对文件操作的方法
* 4、操作完成之后把操作完成之后的文件放在哪里
*/
gulp.task("copy-html",function(){
return gulp.src("src/*.html")
.pipe(minhtml())
.pipe(gulp.dest("dits"))
.pipe(connect.reload())
})
//参数一是名称,参数2是回调函数,pipe是管道,获取到html放到测试,环境文件夹中.pipe()管道可以加很多个
gulp.task("copy-css",function(){
return gulp.src("src/css/*.css")
.pipe(minifycss())
.pipe(gulp.dest("dits/css"))
})
//编译less
gulp.task("less",function(){
return gulp.src("src/css/*.less")
.pipe(less())
.pipe(minifycss())
.pipe(gulp.dest("dits/css"))
})
gulp.task("copy-js",function(){
return gulp.src("src/js/*.js")
.pipe(uglify())
.pipe(gulp.dest("dits/js"))
})
gulp.task("copy-img",function(){
return gulp.src("src/img/*.{jpg,png}")
.pipe(minimg({ //可以传参(参数是对象),对于优化的品质控制
optimizationLevel:7 // 优化品质(默认为3 1~7)
}))
.pipe(gulp.dest("dits/img"))
})
//server
gulp.task("server",function(){
connect.server({
root:"dits", //(根目录服务器范围设定)
port:8888, //(端口号设置)
livereload:true //(热替换,不用刷新就可以实时刷新修改的内容)
})
})
//监听
//watch是监听任务名称,(ctrl + c 是终止监听任务)
gulp.task("watch",function(){
gulp.watch("src/*.html",["copy-html"])
gulp.watch("src/css/*.css",["copy-css"])
gulp.watch("src/js/*.js",["copy-js"])
gulp.watch("src/img/*.jpg",["copy-img"])
gulp.watch("src/css/*.less",["less"])
})
//多任务同时执行:
gulp.task("default",["server","watch"]) //(同时执行数组中的任务,命令行直接执行gulp就可以了)
8----测试环境搭建:执行以上动作后再命令中输入: gulp
或者依次输入:
gulp copy-html ( 即glup 任务名称 )
gulp copy-css
gulp copy-js
gulp copy-img
gulp less
gulp server
gulp watch
9----浏览器中输入地址查看:http://localhost:8888 //(8888为端口号)
web 环境搭建00前端自动化构建工具(gulp)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。