欢迎访问WDPHP素材源码!今天是2024年03月29日 星期五,熬夜对身体不好,早点休息吧!
您好,游客 [ 马上登录 | 注册帐号 | 微信登录 | QQ登录]
当前位置:首页 > 教程 > 工具使用 > 

gulp的使用
栏目分类:工具使用    发布日期:2019-10-23    浏览次数:4551次     收藏

gulp的基础了解

Gulp是一个工具。用于项目构建。

Gulp简介:

多个开发者共同开发一个项目,每位开发者负责不同的模块,这就会造成一个完整的项目实际上是由许多的“代码版段”组成的;

使用less、sass等一些预处理程序,降低CSS的维护成本,最终需要将这些预处理程序进行解析;

合并css、javascript,压缩html、css、javascript、images可以加速网页打开速度,提升性能;

这一系列的任务完全靠手动完成几乎是不可能的,借助构建工具可以轻松实现。

所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。

常见的构建工具包括:Grunt、Gulp、F.I.S(百度出品)、webpack

Gulp是基于Nodejs开发的一个构建工具,借助gulp插件可以实现不同的构建任务,以其简洁的配置和卓越的性能成为目前主流的构建工具。

全局安装 npm install -g gulp

安装:

1.先要全局安装

$ npm install -g gulp --registry=https://registry.npm.taobao.org

2.再本地安装。

切换到项目目录。(先执行 npm init)

$ npm install gulp --registry=https://registry.npm.taobao.org

安装完成会生成一个node_modules文件夹。

gulpfile.js文件的配置

Gulpfile.js是什么文件:

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

而gulpfile.js就是帮助gulp实现自动化管理项目功能的核心文件.

步骤1: 在命令行中安装gulp插件(前提是安装了gulp: npm install gulp -g)

可以同时下载多个插件:

cnpm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev

说明1: 因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以建议使用cnpm。

说明2: 项目依赖分两种,

--save:一个就是普通的项目依赖比如bootstrap,还用一种只是开发阶段需要用的,

--save-dev这种属于开发依赖比如gulp,开发依赖最终记录在devDependencies节点里面

说明3: 一些常用的gulp插件:

1. gulp-less: 把less文件转成css文件

2.gulp-clean-css:css文件压缩。
3.gulp-uglify:js压缩
4.gulp-concat:js合并
5.gulp-rename:重命名,给js压缩文件添加.min后缀
6.gulp-jshint:js语法检查

 

步骤2: 在项目文件夹下面创建一个名叫gulpfile.js的文件夹,在上面的插件下载完毕后,就可以配置相关代码的管理功能了:

步骤3: 开始打开gulpfile.js文件写代码配置(以gulp-less插件为例子):

var gulp = require('gulp'),//载入gulp模块

    less = require('gulp-less');//载入需要用到的插件
//定义一个testLess任务(自定义任务名称)

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

    gulp.src('less/*.less')       //该任务针对的文件

        .pipe(less())             //该任务调用的模块

        .pipe(gulp.dest('css'));  //将会在css下生成index.css

});

//监听less文件

gulp.task('gulpWatch',function(){
gulp.watch('less/*.less',['testLess']);
});
//同时让默认程序执行一次,可以提高开始执行速度。

gulp.task('default',['testLess','gulpWatch']);

最后在你的当前项目命令行中输入gulp执行即可。你会看到在相关的路径下生成对应的css文件。

但是,一般我们在公司,都不需要自己去配置这样一个文件,因为每次开发项目的时候都可以使用公司已经配置好的gulpfile.js文件,
把下面的代码拷贝到自己创建的gulpfile.js文件中即可使用:

var app = {  // 定义目录
    srcPath:'src/',
    buildPath:'build/',
    distPath:'dist/'
}

/*1.引入gulp与gulp插件   使用时,要去下载这些插件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
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:9999  //端口号
    })
    /*监听哪些任务*/
    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:9999');
});

/*定义默认任务
 * 直接执行gulp 会调用的任务
 * */
gulp.task('default',['server']);

把gulp运用到项目实战中

在了解了上面的gulp(一)(二)以后,我们就可以开始在项目中具体使用了,具体使用流程如下:

1. 创建一个project文件夹,然后里面首先创建一个src文件夹,里面放置开发要用到的文件夹:

 

2. 在project下打开git命令窗口(也可以windows自带的命令行):

 

3. 输入命令:

npm install -g gulp --registry=https://registry.npm.taobao.org

实现全局安装gulp;( 只需要执行一次,如果已经执行过了,就不需要再去执行。Gulp -v 有版本号,代表已经执行过了)

在项目中输入命令: npm init –f 实现切换到项目目录,此时会生成package.json文件

然后输入命令: npm install gulp --registry=https://registry.npm.taobao.org

生成node_modules文件夹,这个文件夹是项目依赖包

(以上的操作都是基于安装了node,配置好了nvm和npm环境的基础下的):

    截图代码如下:

 

 

 

生成的文件夹如下所示:

 

4. 在项目目录下创建一个叫gulpfile.js文件: 这个文件是用于自动化管理项目的(即gulp任务管理清单),里面自己可以写一些图片压缩,代码丑化,less自动编译的功能. 这里我们直接拿别人编写好的使用即可(在第二篇的时候可以直接把代码拷贝下来):

 

5. 拿出封装好的less文件(比如字体rem转换文件,一般做webApp开发的时候公司都会提供的两个公共less文件),然后在index.less下用@import的方式导入进去:

 

6. 使用bower下载angular(前提是你得安装了bower,安装的命令是 npm install -g bower,也可以检查你是否安装了bower: bower -v)

u输入命令安装angular: bower install angular anglar-ui-router

 

7. 安装好了以后,就执行命令gulp,会生成如下文件,并且会自动打开浏览器实现无刷新自动更新内容: (这个步骤其实可以放在前面执行,只是一开始src没有创建文件体现不出效果)

 

其中,由于gulpfile.js的自动构建功能,

build文件夹是浏览器执行的文件,里面包含了less编译好的css文件等,所有index.html中导入的外部文件的路径,都是要参考build文件下的,而不是src文件下的. 经过gulpfile.js文件的自动化管理,所有的导入的外部less文件,最后都会变成一个index文件.

dist文件夹是发布文件,

src文件是开发的文件夹,经过gulp命令执行后,都会把文件整合到build文件夹下.所有的代码都是写在src下的,运行的文件都是build文件夹下的

 

下图是经过gulp命令执行后的buid文件:

 

8. 参照build下面的文件夹,在src文件夹中的index.html文件导入相关css,js等外部文件:

因为浏览器上运行的是build文件夹

9. 然后可以在src中的js文件夹,css文件夹中任意再创建文件夹,并在新创建的文件中添加文件,因为反正最后经过gulp自动化管理以后,都会自动变成一个index文件:

10. 另外,可以在编译器中直接使用命令行,有时候页面或者build文件夹没有刷新的时候,可以输入命令: gulp;

如果使用webstorm开发,里面有自带的命令行;

相关热词: gulpnpmcnpm

源码 模板 特效 素材 资源 教程 站长