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为端口号)