Nodejs系列一 gulp初探

Posted 2021-04-08 IT肌肉男

Nodejs，目前最流行运行环境，没有之一，发展非常迅猛，而其中相关的构建工具grunt和gulp也是非常的火爆，功能十分强大，这里，带大家初探gulp的世界。

1. nodejs的安装

首先，得到node官网或者中文网下载一个nodejs，注意选择自己对应的版本。

我的电脑之前已经安装过了，这里就不重新安装了。

安装完之后，可以在DOC操作界面查看你的node是否安装成功。

输入命令行：

node -v

npm -v

npm是node自带的一个前端程序包管理器，用来安装对程序插件进行安装，卸载以及配置。

 2.gulp的安装

新建一个你的项目目录

从DOC操作界面进入该目录

输入命令行：

npm init  然后一直回车就可以了，什么都不需要配置，直到命令界面回到目录下

然后开始输入下面格式命令安装 gulp及其插件：

npm i --save-dev gulp     安装gulp插件并保存设备驱动

等待直到安装成功：

此时gulp已经安装成功。

这时候我们可以回到项目目录下看一看安装的gulp目录

package.json是npm init生成的相关配置文件，node_modules是安装gulp生成的相关目录。

我们再以同样的方式，安装一下常用的几个实用gulp插件：

格式：npm i --save-dev xxx

    gulp-clean       //清除文件（用于在上传修改后文件前删除旧文件）

    gulp-concat      //编译js文件

    gulp-connect  //$.connect.load()用于通知服务器刷新，IE8及以下不支持

    gulp-cssmin  //用于css文件压缩打包

    gulp-imagemin  //用于image文件压缩打包

    gulp-less  //css插件，给css添加变量和函数功能，并且可以把多个css文件引入合成一个css文件

    gulp-load-plugins  //优化，可以使其他gulp模块不需要声明变量来保存，使用 $.less 代替

    gulp-uglify  //用于Js文件压缩打包 

    open  //打开gulp文件的url

 3.安装结束之后，需要写配置文件

在你的项目中随便新建一个js文件 xxx.js，比如：

打开文件，将如下代码填进去，里面有我写的注释。

你可以直接上我的github下载源码：

https://github.com/l511407563/gulp.git

我设置了SSH，如果用 git clone 记得将SSH转换成HTTPS下载。

如果使用的是华为内网可以直接使用Download ZIP下载

这里附上代码和注释：

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var open = require('open');

var app = {

srcPath:'src/',

devPath:'build/',

prdPath:'dist/'

};

gulp.task('lib',function(){       //lib任务名   ，fn 回调函数，任务内容

.pipe(gulp.dest(app.prdPath + 'vendor')) //vendor 就是 bower_components

.pipe($.connect.reload()); //用于通知服务器刷新，IE8及以下不支持

});

gulp.task('html',function(){

gulp.src(app.srcPath + '/**/*.html')      //从src拷贝到build和dist下

.pipe(gulp.dest(app.devPath))

.pipe(gulp.dest(app.prdPath))

.pipe($.connect.reload());

});

gulp.task('json',function(){

gulp.src(app.srcPath + 'data/**/*.json') //从data拷贝到data下

.pipe(gulp.dest(app.devPath + 'data'))

.pipe(gulp.dest(app.prdPath + 'data'))

.pipe($.connect.reload());

});

gulp.task('less',function(){

gulp.src(app.srcPath + 'style/index.less')   //从style拷贝到css下

.pipe($.less())      

.pipe(gulp.dest(app.devPath + 'css'))

.pipe($.cssmin())

.pipe(gulp.dest(app.prdPath + 'css'))

.pipe($.connect.reload());

});

gulp.task('js',function(){

gulp.src(app.srcPath + 'script/**/*.js') //从script拷贝到js下

.pipe($.concat('index.js'))

.pipe(gulp.dest(app.devPath + 'js'))

.pipe($.uglify())

.pipe(gulp.dest(app.prdPath + 'js'))

.pipe($.connect.reload());

})

gulp.task('image',function(){

gulp.src(app.srcPath + 'image/**/*')         //从image拷贝到image下

.pipe(gulp.dest(app.devPath + 'image'))

.pipe($.imagemin())  

.pipe(gulp.dest(app.prdPath + 'image'))

.pipe($.connect.reload());

});

//用于打包上面所有的文件

gulp.task('build',['image','js','less','lib','html','json']);

//用于清除旧的项目文件

gulp.task('clean',function(){

gulp.src([app.devPath,app.prdPath])

.pipe($.clean());

})

//用于自动化执行

gulp.task('server',['build'],function(){

$.connect.server({        //启动一个服务器

root:[app.devPath],   //默认从开发路径读取

livereload:true,      //定义每次写完自动刷新一次服务器，IE不支持

port:1234     //端口

});

open('http://localhost:1234'); //默认打开端口

//监听变化,m-v

gulp.watch('bower_components/**/*',['lib']);

gulp.watch(app.srcPath + '/**/*.html',['html']);

gulp.watch(app.srcPath + 'data/**/*.json',['json']);

gulp.watch(app.srcPath + 'style/**/*.less',['less']);

gulp.watch(app.srcPath + 'script/**/*.js',['js']);

gulp.watch(app.srcPath + 'image/**/*',['image']);

});

//偷懒方法，只输入gulp的时候默认只编译server

gulp.task('default',['server']);

4.以上都弄完之后，你可以创建的项目来测试一下了

这个src目录为源码目录，index.html为首页，style放置样式less文件，script放置js文件，image放置图片，data放置json数据文件,这些文件的名字最好不要改变，因为我配置文件中设定了，如果你学会了修改配置文件，再试着去修改

在DOC命令中输入 gulp 开启项目

gulp开启后的三个效果：

第一，node服务器功能打开，别人可以访问你的个人网页。

第二，每次你保存的时候，都会自动更新生成两个文件，build是开发态的源文件拷贝，dist是压缩态的源文件，你无需再去手动压缩css,js,image等文件，不需要去手动创建更新这些文件。

第三，浏览器实现无刷新自动更新功能。

以前你修改代码保存之后，需要手动F5刷新网页，甚至清除缓存。

现在，你只需要ctrl+s 保存修改后的文件，浏览器将自动刷新

用了gulp，是不是感觉工作瞬间减少了一半以上的时间？

华为内网的同事如果遇到npm无法使用，无法安装gulp的情况，请关注我的HI博客，lwx469789,兰宇。里面有npm的 .huawei.com 镜像设置。