使用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项目结构图：

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.csdn.net/weixin_39072332/article/details/83114570

使用gulp自动化构建工具搭建项目

猜你喜欢