首先非常不好意思,最近好久不写文章了,因为最近事情比较多,也比较繁忙,所以就忘记写文章了,今天就和大家聊聊前端构建利器-gulp
1.什么是构建工具?构建工具解决了那些问题?
- 所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。
- 多个开发者共同开发一个项目，每位开发者负责不同的模块，这就会造成一个完整的项目实际上是由许多的“代码版段”组成的；
- 使用less、sass等一些预处理程序，降低CSS的维护成本，最终需要将这些预处理程序进行解析；
- 合并css、javascript，压缩html、css、javascript、images可以加速网页打开速度，提升性能. 但是,这一系列的任务完全靠手动完成几乎是不可能的，借助构建工具可以轻松实现。
2.构建工具有那些?
- 构建工具有很多例如: gulp, webpack,Grunt,F.I.S（百度出品）,最常用的是gulp,webpack我们先来了解一下gulp
3.全局安装gulp
- 1.gulp是需要用到npm来管理的,npm是nodejs的包管理器,所以需要先下载安装nodejs,然后在来安装gulp
nodejs是一个软件包,直接安装就行了 可以在这里下载下载nodejs - 2.全局安装gulp
$ npm install -g gulp --registry=https://registry.npm.taobao.org
-g 是 global 代表全局安装
--registry=https://registry.npm.taobao.org 淘宝镜像,因为国外服务器比较慢,所以借助淘宝镜像
- 3.当安装好了执行
gulp -v
如果出现版本号代表安装成功
4.本地安装gulp
- 1.进入项目文件里面执行
$ npm install gulp
安装完成会生成一个node_modules文件夹
- 2.开始构建项目,在文件夹的根目录下面创建一个
gulpfile.js文件
根目录下面 -
3.首先我们要明白3个目录 src(开发目录) build(运行目录) dist(开发目录)
维信公众号coderYJ,微博coderYJ - 4.在gulpfile.js里面写入代码
var app = { // 定义目录
srcPath:'src/',
buildPath:'build/',
distPath:'dist/'
};
/*1.引入gulp与gulp插件 使用时，要去下载这些插件*/
// 引入基础模块
var gulp = require('gulp');
// 引入less转css插件
var less = require('gulp-less');
// 引入css代码压缩插件
var cssmin = require('gulp-cssmin');
// 引入js代码压缩插件
var uglify = require('gulp-uglify');
// 引入合并代码插件
var concat = require('gulp-concat');
// 引入服务器连接插件
var connect = require('gulp-connect');
// 引入 图片压缩插件
var imagemin = require('gulp-imagemin');
// 打开执行他之后可以在浏览器中打开
var open = require('open');
/*把bower下载的前端框架放到我们项目当中*/
gulp.task('lib',function () {
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.buildPath+'lib'))
.pipe(gulp.dest(app.distPath+'lib'))
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/*2.定义任务 把所有html文件移动另一个位置*/
gulp.task('html',function () {
/*要操作哪些文件 确定源文件地址*/
gulp.src(app.srcPath+'**/*.html') /*src下所有目录下的所有.html文件*/
.pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/*3.执行任务 通过命令行。gulp 任务名称*/
/*定义编译less任务 下载对应的插件 gulp-less
* 把less文件转成css放到build
* */
gulp.task('less',function () {
gulp.src(app.srcPath+'style/index.less')
.pipe(less())
.pipe(gulp.dest(app.buildPath+'css/'))
/*经过压缩，放到dist目录当中*/
.pipe(cssmin())
.pipe(gulp.dest(app.distPath+'css/'))
.pipe(connect.reload())
});
/*合并js*/
gulp.task('js',function () {
gulp.src(app.srcPath+'js/**/*.js')
.pipe(concat('index.js'))
.pipe(gulp.dest(app.buildPath+'js/'))
.pipe(uglify())
.pipe(gulp.dest(app.distPath+'js'))
.pipe(connect.reload())
});
/*压缩图片*/
gulp.task('image',function () {
gulp.src(app.srcPath+'images/**/*')
.pipe(gulp.dest(app.buildPath+'images'))
.pipe(imagemin())
.pipe(gulp.dest(app.distPath+'images'))
.pipe(connect.reload())
});
/*同时执行多个任务 [其它任务的名称]
* 当前bulid时，会自动把数组当中的所有任务给执行了。
* */
gulp.task('build',['less','html','js','image','lib']);
/*定义server任务
* 搭建一个服务器。设置运行的构建目录
* */
gulp.task('server',['build'],function () {
/*设置服务器*/
connect.server({
root:[app.buildPath],//要运行哪个目录
livereload:true, //是否热更新。
port:8888 //端口号
})
/*监听哪些任务*/
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath+'**/*.html',['html']);
gulp.watch(app.srcPath+'js/**/*.js',['js']);
gulp.watch(app.srcPath+'images/**/*',['image']);
gulp.watch(app.srcPath+'style/**/*.less',['less']);
//通过浏览器把指定的地址 （http://localhost:9999）打开。
open('http://localhost:8888');
});
/*定义默认任务
* 直接执行gulp 会调用的任务
* */
gulp.task('default',['server']);
gulp.task 是创建一个任务 里面有2个参数 第一个参数是任务的名称 第二个参数是回调函数,要执行的任务 pipe是管道符(把前面的输出当作后面的输入)
** 代表所有子目录
*.html 代表html文件
**/*.html代表当前文件夹下所有的html文件
default 代表默认
任务创建完毕之后在命令行 值git命令 执行 gulp html(任务名称) 就可以执行任务了
可以直接gullp 就相当于 gulp default
在跟目录下面创建 src目录,里面是你的工程,开发目录创建html,js/css 然后在webStrom或者你的命令行里面执行gulp神奇的效果就出现了
src下的目录,像我的这个一样,当然你也可以不一样,但是你要在gulpfile.js里面配置一下
持续更新实用的干货
维信公众号coderYJ
微博从coderYJ
简书coderYJ
