使用gulp构建一个项目

绝地灬酷狼 2021-09-30 00:18 557阅读 0赞

# 使用gulp构建一个项目 #

（转载：[https://blog.csdn.net/zchcode/article/details/51556699][https_blog.csdn.net_zchcode_article_details_51556699]）

gulp是前端开发过程中自动构建项目的工具，相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。

gulp是基于Nodejs的自动运行器，他借鉴了Unix操作系统的管道（pipe）思想，前一级的输出是后一级的输入。下面是具体流程：

## 1、安装nodejs ##

nodejs下载地址：[https://nodejs.org/][https_nodejs.org]

nodejs自带npm模块管理器，安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功

常用的npm命令

npm init——初始化

npm install——安装插件

npm install plugname -g——全局安装

npm install plugname@2.3.0——安装具体某个版本的插件

npm update——更新插件

npm uninstall——卸载插件

**常用dos命令**

cd 进入某个目录

cd.. 返回上一级

dir 查看列表

cls 清除屏幕

del name 删除文件

md name 新建目录名

rd name 删除目录名

copy con name.txt 新建文件

del name.txt  删除文件

## 2、全局安装gulp ##

npm install gulp -g

## 3、创建本地项目 ##

上面是准备工作，安装完全局gulp之后，cd到项目文件夹安装本地gulp，安装之前要先初始化

npm init

![Center][]

初始化的时候要求你输入一些值，不输的直接回车即可，点击y之后在根目录自动创建了一个package.json文件，这个文件用来存放即将安装的插件name和version，这个文件有什么用呢？当我们把项目拷贝给别人的时候不需要拷贝插件，只需要把项目文件、package.json和gulp.file.js拷贝过去就可以，接收人cd到项目文件目录直接输入npm install即可安装上我们拷贝前安装的各种插件。

## 4、设计项目目录索引结构 ##

└── src/
        ├── less/    *.less 文件
        ├── sass/    *.scss *.sass 文件
        ├── css/     *.css  文件
        ├── js/      *.js 文件
        ├── fonts/   字体文件
        └── images/   图片
    └── dist/

## 5、安装各种插件 ##

npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev

--save-dev这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内，插件全部安装完之后package.json的变化为：

"devDependencies": {
        "gulp": "^3.9.1",
        "gulp-imagemin": "^2.3.0",
        "gulp-minify-css": "^1.2.4",
        "gulp-uglify": "^1.5.3",
        "gulp-util": "^3.0.7",
        "gulp-watch-path": "^0.1.0",
        "stream-combiner2": "^1.1.1"
      }

gulp——本地gulp  
gulp-imagemin——图片压缩  
gulp-minify-css ——css压缩  
gulp-uglify ——js压缩  
gulp-util ——控制台代码着色  
gulp-watch-path ——文件很多时编辑那个哪个压缩，不会全部压缩（获取改变的文件的src和dest路径）  
stream-combiner2——有些 gulp 任务编译出错会终止 `gulp.watch`，使用 `gulp-watch-path` 配合`stream-combiner2` 可避免这种情况

## 6、gulp如何使用 ##

控制台输入gulp的时候首先找寻gulpfile.js文件，在找寻default任务，所以我们应该手动新建一个名为gulpfile.js的js文件，将任务写在里面。具体文件目录为：

![Center 1][]

gulp一共五中方法：

gulp.task()——新建任务

gulp.src()——获取文件源地址

gulp.dest()——文件输出地址

gulp.run()——运行任务

gulp.watch()——监听文件修改

## 7、编写gulpfile.js文件 ##

（1）引入插件变量

var gulp = require('gulp'),
        uglify = require('gulp-uglify'),
        minifycss = require('gulp-minify-css'),
        imgmin = require('gulp-imagemin'),
        gutil = require('gulp-util'),
        watchPath = require('gulp-watch-path'),
        combiner = require('stream-combiner2');

（2）新建代码着色与显示错误日志方法，这个方法用到了gulp-util和stream-combiner2插件

var handleError=function(err){
        console.log('\n');
        gutil.log('fileName: '+gutil.colors.red(err.fileName));
        gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));
        gutil.log('message: ' + err.message);
        gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));
    };

（3）新建js批量压缩任务

gulp.task('script',function(){
        //script时自定义的
    //将文件的源路径和发布路径赋值给相应变量
        var srcJsPath='js/*.js';
        var destJsPath='dist/js/';
        var combined = combiner.obj([
                gulp.src(srcJsPath),//获取文件源地址
                uglify(),//执行压缩
                gulp.dest(destJsPath)//将压缩的文件发布到新路径
            ]);
        combined.on('error', handleError);//打印错误日志
    });

这种写法需要css目录下有很多css文件，只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍，为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件

gulp.task('watchjs',function(){
        gulp.watch('js/*.js',function(event){
        var paths=watchPath(event,'js/','dist/js/');
            //打印修改类型和路径
            gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
            gutil.log('Dist: ' + paths.distPath);
            //获取错误信息，继续执行代码
            var combined = combiner.obj([
                    gulp.src(paths.srcPath),
                    uglify(),
                    gulp.dest(paths.distDir)
                ]);
            combined.on('error', handleError);
        });
    });

（4）编写default任务和监听任务

新建批量任务还是监听修改任务根据项目中实际需要去写，等我们写好很多任务之后就需要写入default中，default写好之后只需要在dos窗口写入gulp就可以自动执行任务

gulp.task('default',function(){
        //默认执行的方法，引号内的内容对应上面task写的内容
        gulp.run('watchjs','css','images');
        //监控js
        gulp.watch('js/*.js',['watchjs']);
        //监控css
        gulp.watch('css/*.css',['css']);
        //监控img
        gulp.watch('images/*.*',['images']);
    });

如果不想执行默认任务只执行js单文件压缩任务只需要输入 gulp watchjs即可。控制台输入为下图：

![Center 2][]

此时，gulp处于监听状态，如果要取消需要按ctrl+c 回车即可。

补充：

将本文件夹下的文件发布到其他盘

//注意src的参数
    gulp.task('distCopyEclipse',function(){
        return gulp.src('src/cssEclispe/*',{nodir:true})
        .pipe(cached('distCopyEclipse'))
        .pipe(gulp.dest('D:/workSpace/makerplateform/webapp/instantcommunication/theme/css'))
        .pipe(gulp.dest('D:/tomcat7/webapps/makerplateform/instantcommunication/theme/css'));
    });

转载于:https://www.cnblogs.com/wangyihong/p/9323032.html

[https_blog.csdn.net_zchcode_article_details_51556699]: https://blog.csdn.net/zchcode/article/details/51556699
[https_nodejs.org]: https://nodejs.org/
[Center]: /images/20210725/dcb1f182305f4154816bf0d101f7c63b.png
[Center 1]: /images/20210725/98658b2848b640e08e9fd207c921f60b.png
[Center 2]: /images/20210725/a2229b19979a497fb4d78ccad1cc5dbe.png