gulp工具学习记录

最新推荐文章于 2021-03-04 15:38:21 发布

原创最新推荐文章于 2021-03-04 15:38:21 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gulp #前端 #node.js #Django

django 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用Gulp工具进行自动化任务配置，包括安装、创建本地包管理、处理CSS、JS和图片文件，以及设置监听任务。适用于前端开发者快速上手Gulp，提升开发效率。

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

gulp工具学习记录

推荐学习：超细讲解Django打造大型企业官网

在这里插入图片描述

创建本地包管理工具

使用npm init命令在本地生成一个package.json文件，package.json是用来记录你当前这个项目依赖了哪些包。这个就是包管理工具

安装

全局安装

npm install gulp -g

本地安装并且在包里工具中记录

npm install gulp --save-dev

创建任务

处理css文件的任务

引入包

var cssnano = require('gulp-cssnano');//压缩css文件
var sass = require('gulp-sass');

创建任务

gulp.task("css",function () {
    gulp.src(path.css+'*.scss')
        .pipe(sass().on('error',sass.logError))//转化
        .pipe(cssnano())//压缩
        .pipe(rename({"suffix":'.min'}))//重命名
        .pipe(gulp.dest(path.css_dist))//放到目的地址
        .pipe(bs.stream())
});

处理js文件任务

引入包

var uglify = require('gulp-uglify');//压缩js文件

创建任务

gulp.task('js',function () {
    gulp.src(path.js+'*.js')
        .pipe(uglify({
            'toplevel':true,//顶部变量进行压缩
          'compress':{//取消所有console打印
         'drop_console':true
        }}))
        .pipe(rename({"saffix":'.min'}))
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
});

创建处理images任务

引入包

var imagemin = require('gulp-imagemin');//图片压缩
var cache = require('gulp-cache');//图片缓存

创建任务

gulp.task("images",function () {
    gulp.src(path.images+'*.*')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())
});

处理监听任务

引入包

var bs = require('browser-sync').create();

创建任务

gulp.task('watch',function () {//watch是内置接口不用引入包
    gulp.watch(path.css+'*.scss',['css']);
    gulp.watch(path.html+'*.html',['html']);
    gulp.watch(path.js+'*.js',['js']);
    gulp.watch(path.images+'*.*',['images'])
});

gulp.task('bs',function () {
    bs.init({
        'server':{
            'baseDir':'./'
        }
    });
});

gulp.task('default',['bs','watch']);