在选择构建工具时很多人都会选择使用gulp，相对于webpack和grunt，gulp是比较容易入门的。下面为大家详细讲解一下在实际开发项目中是如何使用gulp构建工具的。
1、安装node.js(npm)
gulp的安装依赖node.js的npm，所以需要先安装node.js，下载后直接安装即可，目前新版本的node都是集成了npm的。如下图则是已经安装好。
2、安装git
在实际开发项目中git是必不可少的，方便我们下载一些必须的包。直接官网下载即可，可能下载会比较慢，可以通过此链接下载。
1、全局安装gulp
安装后可查看是否安装成功，若成功会显示版本，如下图，若未成功则需要配置一下node。
npm install --global gulp
2、在项目下初始化一下npm(我是新建了一个名为test的文件夹)
在test文件夹下，使用git初始化npm。会出现一些提示，直接Enter确认就可以。
这样在我们的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已经作为开发以来被添加进配置里。
3、安装项目所需要插件(在这里我们需要9个插件)
直接npm作为开发依赖安装即可，可以单独安装，也可以像我这样9个一起安装空格隔开即可。
所需的插件
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
成功后会生成build 和 dist文件夹，并且在它们下面各有一个被构建进去的jquery.js文件夹vendor。
(3)构建一下html文件
新建src文件夹，并创建一个文件，在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
可以看到在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中
实际开发中我们只生成一个样式文件，并且会进行压缩。
//操作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是压缩过的。
(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('https://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
会直接打开你的index.htm页面，每次修改代码时会自动刷新！！
（11）执行默认服务
我们可以设置一下gulp的默认动作，这里我设置成serve,就是只要执行$gulp直接进入服务，打开页面。
//默认执行serve
gulp.task('default', ['serve']);
$ gulp
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
网友评论