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']);

Warning: JSLint will hurt your feelings.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值