使用Gulp搭建前端开发环境-优快云博客

本文介绍如何利用Gulp工具进行前端自动化开发流程的设置，包括安装必要的插件、配置任务来实现本地服务器启动、文件监听、Sass编译等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install -g gulp

插件

npm install --save-dev
#简化写法：
npm i -D
gulp-connect
gulp-jshint
gulp-sass
gulp-concat
gulp-uglify
gulp-rename

//依赖声明
var gulp = require('gulp'),
    connect = require('gulp-connect'),
    watch = require('gulp-watch'),
    sass = require('gulp-sass'),
    coffee = require('gulp-coffee'),
    jslint = require('gulp-jslint');
//服务器配置
gulp.task('webserver', function () {
    connect.server({
        port: 8081,
        livereload: true,
        root: ['.', '.tmp']
    });
});
//自动刷新
gulp.task('livereload', function () {
    gulp.src(['.tmp/styles/*.css', '.tmp/scripts/*.js'])
        .pipe(watch())
        .pipe(connect.reload());
});
//sass，coffee文件处理
gulp.task('sass', function () {
    gulp.src('styles/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('.tmp/styles'));
});

gulp.task('coffee', function () {
    gulp.src('scripts/*.coffee')
        .pipe(coffee())
        .pipe(gulp.dest('.tmp/scripts'));
});
//检测js错误
gulp.task("jslint", function () {
    return gulp.src(['*'])
        .pipe(jslint({
            node: true,
            nomen: true,
            sloppy: true,
            unparam: true,
            stupid: true
        }));
});
//监控文件
gulp.task('watch', function () {
    gulp.watch('styles/*.scss', ['sass']);
    gulp.watch('scripts/*.coffee', ['coffee']);
});
//默认task
gulp.task('default', ["jslint"]);
//gulp.task('default', ['sass', 'coffee', 'webserver', 'livereload', 'watch']);