前端构建利器-gulp

首先非常不好意思,最近好久不写文章了,因为最近事情比较多,也比较繁忙,所以就忘记写文章了,今天就和大家聊聊前端构建利器-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