安装Gulp构建前端自动化工具

0. 前言

在我们正常开发过程中，我们写的项目最后都得打包、压缩然后上线，现在，我知道的几个前端自动化构建工具有Webpack、grunt、fls3、gulp等，但是其中最火的是Webpack，它确实比较厉害，但是我不怎么了解，咱们今天说点别的，捂脸，就说这个gulp吧！gulp学习成本很低，而且还简单，没有那么复杂的操作，就那么几步。

timg.jpg

1. 简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

2. 安装

1. 安装node.js （gulp是基于node.js下面运行的）
2. 安装gulp
   一、全局安装npm install gulp -g
   二、本地安装npm install gulp --save-dev
   注：1. -g是全局安装 2. --save将保存的配置信息至package.json 3. -dev将它作为你的项目依赖添加到中devDependencies内 4. 由于gulp会自带package.json文件（用于存储项目的元数据）
3. gulp安装插件（install gulp plugins）
   一、静态服务器（gulp-webserver）
   二、网页自动刷新（gulp-livereload）
   安装命令npm install gulp-livereload gulp-webserver --save-dev

3. gulp任务配置

1. 在项目根目录中，创建gulpfile.js文件，用来配置和定义任务（task）
2. 编辑gulpfile.js文件

    // 引入gulp,基础库
        var gulp = require('gulp'),
        // 引入gulp插件,网页自动刷新(服务器控制客户端同步刷新)
        livereload = require('gulp-livereload'),
        // 本地服务器
        webserver = require('gulp-webserver');
        // 注册任务
        gulp.task('webserver',function(){
            // 服务器目录
            gulp.src('./')
            //运行gulp-webserver
            .pipe(webserver({
                // 启动livereload
                livereload : true,
                // 服务器启动时自动打开网页
                open : true
            }));
        });
        // 监听任务
        gulp.task('watch',function(){
            // 监听根目录下的所有.html文件
            gulp.watch('*.html',['html'])
        });
        // 默认任务
        gulp.task('default',['webserver','watch']);

3. 默认执行（在命令行输入）
   gulp
4. 执行特定的任务
   gulp webserver

图片.png

4. 结束语

希望我写的文章对你有所帮助，最后，还请各位读者多多关照，谢谢！！！