使用gulp自动化构建工具搭建项目
gulp是一个自动化构建工具,使用它可以很轻松地执行项目开发过程中的常见任务,这里将基本的gulp的使用方法记录下来。
1、首先,确保安装了node,npm(node -v/npm -v 查看安装版本),同时可以安装cnpm,国内访问会快很多,但是有时候安装一些东西会存在安装不全的问题(npm install -g cnpm --registry=https://registry.npm.taobao.org)
2、这里正式开始gulp安装,全局安装gulp:npm install gulp -g
3、创建一个工程目录,执行npm init来初始化package.json,下面是我新建的一个demo项目结构图:
4、项目中安装gulp:npm install gulp
5、在项目中新建gulpfile.js文件,用来构建gulp任务——
var gulp = require('gulp'),
connect = require('gulp-connect'),
open = require('gulp-open'),
clean = require('gulp-clean');
// 如果需要可以引入一些其它的模块来辅助开发
// var $ = require('gulp-load-plugins')();
// var jsdoc = require('gulp-jsdoc3');
// var open = require('open');
// 监视
gulp.task('html', function () {
return gulp.src('src/index.html')
.pipe(gulp.dest('build/'));
});
gulp.task('css', function () {
return gulp.src('src/css/*.css')
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function () {
return gulp.src('src/js/*.js')
.pipe(gulp.dest('build/js'))
});
gulp.task('imgs', function () {
return gulp.src('src/imgs/*')
.pipe(gulp.dest('build/imgs'))
});
// 打包任务
gulp.task('build',[
'html',
'css',
'js',
'imgs'
]);
// 开启服务
gulp.task('serve', ['build'], function(){
connect.server({
root: 'src/',
livereload: true,
port: 8888
});
// 打开浏览器
open('http://localhost:8888/index.html');
gulp.watch('index.html', ['html']);
gulp.watch('src/css/index.css', ['css']);
gulp.watch('src/js/index.js', ['js']);
gulp.watch('src/imgs/*', ['imgs']);
});
// 默认任务
gulp.task('default', ['serve']);
// 清空
gulp.task('clean', function(){
return gulp.src('build')
.pipe(clean());
});
最后项目根目录下运行对应命令,就可以执行不同任务啦~~~
文章结尾附上常用的gulp插件介绍:https://blog.****.net/weixin_39072332/article/details/83114570