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

时间: 10-24

web 环境搭建00前端自动化构建工具(gulp)的相关文章

前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin

前端自动化构建工具gulp记录

什么是gulp 答:Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新.. 为什么要用gulp? 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合并,减少http请求:文件压缩,减少文件体积,加快下载速度: 3.效率提升:

前端自动化构建工具gulp使用

1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 package.json 的文件: 附上本人项目基本配置 { "devDependencies": { "concat": "0.0.1-security", "gulp": "

前端自动化构建工具gulp(二)

创建一个真实的例子: 创建一个项目,结构如图 gulp的使用方法通常是这样的 gulp.task('task-name', function () { return gulp.src('source-files') // source-files是任务的入口文件路径 .pipe(aGulpPlugin()) // 调用插件 .pipe(gulp.dest('destination')) //destination执行任务输出文件路径 }) 我们将使用gulp-sass插件来编译sass: 1.安

前端自动化构建工具Webpack开发模式入门指南

Webpack Webpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析.压缩.合并.打包,最后生成浏览器支持的代码 特点: 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库 Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块 p

前端自动化构建工具

全局安装是把包安装在Node安装目录下的node_modules文件夹中,一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录 本地(局部)安装是把包安装在指定项目(要在指定的根目录下输入命令)的node_modules文件夹下(若没有,会自动创建一个node_modules文件夹) 具体区别,推荐博文:  全局安装和本地(局部)安装的区别 本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动.复制.打包等,保证不

基于gulp搭建的前端自动化构建框架

Gulp-cli 基于gulp搭建的前端自动化构建.适用于中小型项目,快速构建前端项目框架. 项目启动 // 常用命令 项目编译: npm run build 项目编译并启动: npm run start 项目地址 如对你有帮助,希望给个Star !哈哈哈!! git clone [email protected].com:perfectSymphony/Gulp-cli.git 项目目录 ├── README.md # 项目说明 |-- bin # (在gulpfile文件中使用到)解析lay

前端自动化构建工具-yoman浅谈

如今随着前端技术的飞速发展,前端项目也变得越来越复杂.快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求.当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的时间.既然如此要是有自动化的项目构建工具,帮你生成各种必须的配置项,你只需愉快的写代码该多方便呀.嗯,是的这样的工具或者说脚手架确实是有的,就是下面要提到的eoman.来吧,一起看一下如何使用这个工具让你的项目秒建吧. 初识yeoman yeoman是什么 yeoman是Google领头开发的一个前端构

gulp 前端自动化构建工具

gulp是基于nodejs的自动化构建工具, 可自动化完成js css sass less html image的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成.监听文件. 1:基于nodejs先装nodejs(.msi) 2:命令行装npm,npm是nodejs的包管理工具,对node插件进行安装.卸载等 npm install XX -g  安装XX插件 全局安装 --save 将保存配置保存至package.json(package.json把安装插件信息保存到此,可供其他开