欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-25 14:29:39
...
在选择构建工具时很多人都会选择使用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的基础,和在实际开发中常用到的一些插件。如有问题可以留言告诉我,我们一起进步。

相关标签: gulp