新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)

时间:2022-02-20 20:11:09
在选择构建工具时很多人都会选择使用gulp,相对于webpack和grunt,gulp是比较容易入门的。下面为大家详细讲解一下在实际开发项目中是如何使用gulp构建工具的。
准备工作(若已安装可忽略,直接看详解步骤)

1、安装node.js(npm)
gulp的安装依赖node.js的npm,所以需要先安装node.js,下载后直接安装即可,目前新版本的node都是集成了npm的。如下图则是已经安装好。
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
2、安装git
在实际开发项目中git是必不可少的,方便我们下载一些必须的包。直接官网下载即可,可能下载会比较慢,可以通过此链接下载

下面开始gulp的详解

1、全局安装gulp

安装后可查看是否安装成功,若成功会显示版本,如下图,若未成功则需要配置一下node。

npm install --global gulp

新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
2、在项目下初始化一下npm(我是新建了一个名为test的文件夹)
在test文件夹下,使用git初始化npm。会出现一些提示,直接Enter确认就可以。
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
这样在我们的test文件夹下就生成了一个package.json文件。

3、在test项目下作为开发依赖安装gulp

就像我的项目名称为test,需要在test下作为开发依赖安装一遍gulp。(以下命令均在git中执行)

//--save-dev是作为开发依赖  --save是作为发布后的依赖
$ npm install  --save-dev gulp

局部安装后,在test下回生成node_modules文件夹,你的gulp包都在里面可以不用管他。打开package.json可以看到,gulp已经作为开发以来被添加进配置里。
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
3、安装项目所需要插件(在这里我们需要9个插件)
直接npm作为开发依赖安装即可,可以单独安装,也可以像我这样9个一起安装空格隔开即可。
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
所需的插件
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
4、开始构建,手动创建gulpfile.js文件
在test文件夹下手动创建gulpfile.js文件,创建好以后我们就要开始配置内容了。

5、在gulpfile.js下操作各类文件,步骤如下
(1) 首先获取到我们安装的gulp插件

var gulp = require('gulp');
//加载各类gulp插件
var $ = require('gulp-load-plugins')();
var open = require('open');

(2)我们先构建一下必须的包,以jQuery.js为例

我们新建一个文件夹命名为components,将jQuery的包放进去(可直接复制过去,建议使用npm或者bower进行安装)。
接下来我们来构建以下jquery。

var app = {
    srcPath: 'src/',
    devPath: 'build/',//开发目录
    prdPath: 'dist/' //生产目录
};
//操作包文件
gulp.task('lib', function () {
    //操作components下所有的js文件
    gulp.src('components/**/*.js')
        //在build下创建vendor文件夹,并将包构建进去
        .pipe(gulp.dest(app.devPath + 'vendor'))
        //在dist下创建vendor文件夹,并将包构建进去
        .pipe(gulp.dest(app.prdPath + 'vendor'))
        //通知浏览器自动刷新更改 低级浏览器不支持
        .pipe($.connect.reload());
});

在git下执行

$ gulp lib 

新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
成功后会生成build 和 dist文件夹,并且在它们下面各有一个被构建进去的jquery.js文件夹vendor。
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)

(3)构建一下html文件
新建src文件夹,并创建一个index.html文件,在src下新建view文件夹,创建1.html和2.html

//操作html文件
gulp.task('html', function () {
    //操作src下所有的html文件
    gulp.src('src/**/*.html')
        .pipe(gulp.dest(app.devPath))
        .pipe(gulp.dest(app.prdPath))
        .pipe($.connect.reload());
});

直接git下操作

$ gulp html

新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
可以看到在build和dist文件夹下都生成了相应的html文件。
(4)构建json文件(实际开发中直接从后台传过来数据,我们这里使用的json只是一些假数据)
在src下新建data文件夹,可以创建一个1.json进行测试。

//操作json文件
gulp.task('json', function () {
    gulp.src('src/**/*.json')
        .pipe(gulp.dest(app.devPath))
        .pipe(gulp.dest(app.prdPath))
        .pipe($.connect.reload());
});
$ gulp json

在build和dist下分别生成相应的json文件
(5)构建less(CSS)文件
在src下创建style文件夹,新建index.less(或者css),再新建一个1.less和2.less,敲入一些测试数据。同时将1.less和2.less引入到index.less中
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
实际开发中我们只生成一个样式文件,并且会进行压缩。

//操作less(css)
gulp.task('less', function () {
    //操作主样式文件
    gulp.src('src/style/index.less')
        //解析less文件
        .pipe($.less())
        //在build中生成css文件夹用来存放index.css
        .pipe(gulp.dest(app.devPath + 'css'))
        //压缩css文件
        .pipe($.cssmin())
        //在build中生成css文件夹用来存放压缩后的index.css
        .pipe(gulp.dest(app.prdPath + 'css'))
        .pipe($.connect.reload());
});
$ gulp less

我们可以看到我们的dist下的css中生成的index.css是压缩过的。
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)

(6)构建js文件
在src下新建script文件夹,并在script下新建index.js ,在新建一个1.js和2.js,写入一些册书数据。

//操作js
gulp.task('js', function () {
    //对script下的所有js进行操作
    gulp.src(app.srcPath + 'script/**/*.js')
        //将这些js文件进行合并
        .pipe($.concat('index.js'))
        .pipe(gulp.dest(app.devPath + 'js'))
        //将这些js文件进行压缩
        .pipe($.uglify())
        .pipe(gulp.dest(app.prdPath + 'js'))
        .pipe($.connect.reload());
});
$ gulp js

两个文件夹下生成两个js文件夹,index.js是经过合并的,一个是压缩版,一个是未压缩版。

(7)构建图片文件
在src下创建image文件夹,放入一张图片

//操作图片
gulp.task('image', function () {
    gulp.src(app.srcPath + 'images/**/*')
        .pipe(gulp.dest(app.devPath + 'image'))
        //压缩图片
        .pipe($.imagemin())
        .pipe(gulp.dest(app.prdPath + 'image'))
        .pipe($.connect.reload());
});
$ gulp image

同上,生成的图片是经过压缩和未经过压缩的

(8)打包所有文件
对所有文件进行打包

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

(9)清除目录
会将所有的目录清除掉……

//清除目录
gulp.task('clean', function () {
    gulp.src([app.devPath, app.prdPath])
        .pipe($.clean());
});
$ gulp clean

(10)创建服务,自动刷新(很有用!!)
我们在开发时,配置好了这个服务,我们修改代码后,会直接自动刷新,并且自动打开网址。

//服务
gulp.task('serve', ['build'], function () {
    //连接服务
    $.connect.server({
        //root代表从哪个路径下开始读取 这里是从开发目录下开始读取
        root: [app.devPath],
        //开启后自动刷新浏览器 IE8以下暂不支持
        livereload: true,
        //定义端口
        port: 1234,
    });
    //默认打开浏览器
    open('http://localhost:1234');
    //监控文件 自动构建代码
    gulp.watch('bower_components/**/*', ['lib']);
    //监控的是src下的各类文件
    gulp.watch('src/**/*.html', ['html']);
    gulp.watch('src/data/**/*.json', ['json']);
    gulp.watch('src/style/**/*.less', ['less']);
    gulp.watch('src/script/**/*.js', ['js']);
    gulp.watch('src/images/**/*', ['image']);
});
$ gulp serve 

新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
会直接打开你的index.htm页面,每次修改代码时会自动刷新!!
新手入门gulp必备以及gulp常用插件在项目中的使用(windows下操作)
(11)执行默认服务
我们可以设置一下gulp的默认动作,这里我设置成serve,就是只要执行$gulp直接进入服务,打开页面。

//默认执行serve
gulp.task('default', ['serve']);
$ gulp

上面是一些gulp的基础,和在实际开发中常用到的一些插件。如有问题可以留言告诉我,我们一起进步。