gulp 学习第1天，gulp每日简单练习

最新推荐文章于 2025-11-12 14:30:45 发布

原创最新推荐文章于 2025-11-12 14:30:45 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

gulp 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Gulp进行自动化构建的示例项目，包括项目的初始化、安装必要的依赖包、创建HTML页面及SCSS文件、配置Gulp任务来编译SCSS为CSS并启动本地服务器进行实时预览。

1，创建新项目

cnpm init

2，安装用到的包

cnpm install gulp gulp-sass node-sass gulp-connect --save-dev

3，在项目根目录创建页面

index.html

<!--Created by Sukla on 2018/3/2.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="./dest/styles/style.css"/>
</head>
<body>
</body>
</html>

src/styles/style.scss

5，创建gulp配置文件gulpfile.js

/**
 * Created by Sukla on 2018/3/2.
 */
var gulp=require('gulp')
var sass=require('gulp-sass')
var connect=require('gulp-connect')

gulp.task('buildcss',function(){
    gulp.src('./src/styles/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('./dest/styles/'))
})

gulp.task('buildhtml',function(){
    gulp.src('./*.html')
        .pipe(connect.reload())
})

gulp.task('watch',function(){
    connect.server({
        livereload:true
    });
    gulp.watch('./src/styles/*.scss',['buildcss','buildhtml']);
    gulp.watch('./*.html',['buildhtml'])
})

6，启动gulp监听任务