前端练习项目gulp配置

linkFly 发布于2019-08-21 17:14 / 3167人阅读

摘要：记录下学习过程使用的一些经验我的文件夹目录是这样的功能需求如下在任意子目录下修改文件后自动编译在对应项目文件夹的文件夹下在任意子目录下修改文件后都自动刷新浏览器增加了压缩文件的需求，需要

记录下学习过程使用gulp的一些经验

我的文件夹目录是这样的

|-- project
    |-- child-project
        |-- src
            |-- html
            |-- less
            |-- js
            |-- img
        |-- dist
            |-- html
            |-- css
            |-- js
            |-- img

功能需求如下

在 project任意子目录下修改less文件后自动编译在对应项目文件夹的css文件夹下

在 project任意子目录下修改html、js、less文件后都自动刷新浏览器

2017-12-14

增加了压缩文件的需求，需要将src中的js文件/img/css文件进行压缩，压缩至dist文件夹下

增加了检查js代码

实际配置

//编译与刷新浏览器
    //导入工具包
var gulp = require("gulp"),
    less = require("gulp-less"),
    browserSync = require("browser-sync").create(),
    browserReload = browserSync.reload,
    rename = require("gulp-rename");

//定义less编译任务
gulp.task("lessCompile", function() {
    gulp.src("./project/**/*.less") //该任务针对的文件
        .pipe(less())//该任务调用的模块
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace("less", "css");
        }))
        .pipe(gulp.dest("./project"))
        .pipe(browserReload({stream: true}));
});

//监听 本地 less/html/js 文件
gulp.task("serve", function(){
    //监听本地文件
    browserSync.init({
        server: {
            baseDir: "./project",
            directory: true
        }
    });
    //监听less
    gulp.watch("./project/**/*.less", ["lessCompile"]);
    //监听html
    gulp.watch("./project/**/*.html").on("change", browserReload);
    //监听js
    gulp.watch("./project/**/*.js").on("change", browserReload);
    
}); 

//定义默认任务
gulp.task("default", ["serve"]);

//代码检查和压缩
gulp.task("jsHint", function() {
    gulp.src(["./project/**/*.js", "!./project/**/dist/**/*.js"])//检查的文件，忽略dist中的js文件
        .pipe(jshint(jshintConfig))//检查
        .pipe(jshint.reporter("default")); // 输出检查结果
});
//定义js压缩任务（css与img同此，更换插件即可）
gulp.task("jsmin", function() {
    gulp.src(["./project/**/*.js", "!./project/**/dist/**/*.js"])//压缩的文件，忽略dist中的js文件
        .pipe(uglify())//压缩
        //.pipe(rename({suffix:".min"}))//增加min后缀
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace("src", "dist");
        }))//压缩至dist文件夹
        .pipe(gulp.dest("./project"));
});

参考学习

http://www.cnblogs.com/2050/p...，src与dest的路径学习参考此文
http://www.ydcss.com/archives/18 gulp的详细入门指南
http://blog.csdn.net/u0137205... jshint的参数的配置

云服务器 GPU云服务器 javascript项目练习前端项目前端项目视频前端开发项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89287.html

“流式”前端构建工具——gulp.js 简介

摘要：流式构建改变了底层的流程控制，大大提高了构建工作的效率和性能，给用户的直观感觉就是更快。我的看法关于流式构建，短短几句话无法讲清它的来龙去脉，但是在的世界里，确实是至关重要的。 Grunt 一直是前端领域构建工具（任务运行器或许更准确一些，因为前端构建只是此类工具的一部分用途）的王者，然而它也不是毫无缺陷的，近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 评论0 收藏0
做一个合格的前端，gulp资源大集合

摘要：承接前一篇做一个合格的前端，自动化构建工具入门教程故而整理了如下插件资源大全。接下来我会逐一开源观点网开发过程中的前后端技术，如全文索引自定义富文本编辑器图片上传压缩水印等等。承接前一篇《做一个合格的前端，gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。**【我的新作观点网：http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考...

Baoyuan 2019-08-22 13:54 评论0 收藏0
webpak最全的简单入门

摘要：了解什么是官方文档是这样介绍的点我了解官方文档简单的来说，可以看做是模块打包机它做的事情是，分析你的项目结构，找到模块以及其它的一些浏览器不能直接运行的拓展语言，等，并将其转换和打包为合适的格式供浏览器使用。了解webpack 什么是webpack 官方文档是这样介绍的：点我了解官方文档简单的来说，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaSc...

FreeZinG 2019-08-26 10:46 评论0 收藏0
库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
前端开发应届生面试指南（含各大公司具体指南及面试真题）

摘要：先介绍一下本人应届前端开发一枚，非科班出身，专业是化学，大学期间开始自学前端开发，在今年春招实习和秋招的时候投了一些公司，拿到一些京东拼多多虎牙等，总体来说还算满意，特地写一篇文章来总结一下面试的那些套路。 showImg(https://segmentfault.com/img/remote/1460000011897700); 先介绍一下本人应届前端开发一枚，非科班出身，专业是化学...

sunnyxd 2019-08-21 17:30 评论0 收藏0