gulp最佳实践（包含js,css,html预编译，合并，压缩,浏览器自动刷新）

Eirunye 发布于2019-08-01 14:58 / 3192人阅读

摘要：是基于流的自动化构建工具官方网址安装需要的模块新建输入下面的内容命令配置代码说明看解释，如果有任何疑问请查看官方入门手册，网址在上面导入需要的模块编译，其中是防止出错崩溃的插件编译编译将所有文

gulp是基于流的自动化构建工具
官方网址：http://www.gulpjs.com.cn/

安装需要的模块

新建package.json,输入下面的内容

命令npm install

{
  "name": "autopractice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.10.1",
    "coffee-script": "^1.10.0",
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.1",
    "gulp-coffee": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^2.3.1",
    "gulp-jade": "^1.1.0",
    "gulp-jshint": "^2.0.0",
    "gulp-less": "^3.0.5",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.2",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.5.1",
    "gulp-webpack": "^1.5.0",
    "jade": "^1.11.0",
    "jshint": "^2.8.0"
  }
}

配置gulp

代码说明看解释，如果有任何疑问请查看官方入门手册，网址在上面

// 导入需要的模块
var gulp = require("gulp"),
    less = require("gulp-less"),
    jade = require("gulp-jade"),
    coffee = require("gulp-coffee"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    browserSync = require("browser-sync").create(),
    plumber = require("gulp-plumber"),
    minifyCss = require("gulp-minify-css");


// 编译less，其中plumber是防止出错崩溃的插件
gulp.task("less", function() {
    gulp.src("src/less/*.less")
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest("dist/css"));
});

// 编译jade
gulp.task("jade", function() {
    gulp.src("src/jade/*.jade")
        .pipe(plumber())
        .pipe(jade())
        .pipe(gulp.dest("public"));
});

// 编译coffee
gulp.task("coffee", function() {
    gulp.src("src/coffee/*.coffee")
        .pipe(plumber())
        .pipe(coffee())
        .pipe(gulp.dest("dist/js"));
});



// 将所有css文件连接为一个文件并压缩，存到public/css
gulp.task("concatCss", function() {
    gulp.src(["dist/css/*.css"])
        .pipe(concat("main.css"))
        .pipe(minifyCss())
        .pipe(gulp.dest("public/css"));
});


// 将所有js文件连接为一个文件并压缩，存到public/js
gulp.task("concatJs", function() {
    gulp.src(["dist/js/*.js"])
        .pipe(concat("main.js"))
        .pipe(uglify())
        .pipe(gulp.dest("public/js"));
});



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


// 监听任务
gulp.task("watch", function() {

    // 建立浏览器自动刷新服务器
    browserSync.init({
        server: {
            baseDir: "public"
        }
    });


    // 预处理
    gulp.watch("src/jade/**", ["jade"]);
    gulp.watch("src/coffee/**", ["coffee"]);
    gulp.watch("src/less/**", ["less"]);


    // 合并压缩
    gulp.watch("dist/css/*.css", ["concatCss"]);
    gulp.watch("dist/js/*.js", ["concatJs"]);


    // 自动刷新
    gulp.watch("public/**", function() {
        browserSync.reload();
    });

});

测试

控制台运行gulp
浏览器将自动打开
修改任意文件，浏览器自动刷新

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

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

gulp最佳实践（包含js,css,html预编译，合并，压缩,浏览器自动刷新）

摘要：是基于流的自动化构建工具官方网址安装需要的模块新建输入下面的内容命令配置代码说明看解释，如果有任何疑问请查看官方入门手册，网址在上面导入需要的模块编译，其中是防止出错崩溃的插件编译编译将所有文 gulp是基于流的自动化构建工具官方网址：http://www.gulpjs.com.cn/ 安装需要的模块新建package.json,输入下面的内容命令npm install { ...

Awbeci 2019-08-19 17:14 评论0 收藏0
[ 前端实习日记 ] 构建静态页面基础架构

以前我们敲静态页面都是写好html，css, js，然后再去刷新浏览器，艾尼马又不行，有重新写过再刷新，一个页面下来按chrl+r的次数可让你的键盘多活好几天，要不会刷新快捷按钮那不得手残了都。后来，grunt,gulp等工具应运而生，当然它们不止这个功能，但却很好地减轻了我们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是个人的目前在用的不成熟的方案，更专业的还请参考...

lidashuang 2019-08-21 10:35 评论0 收藏0
前端工具系列之一 Gulp

摘要：从大约年开始前端不再是当初那个切图排版的前端了，各种框架库工具呈井喷之势层出不穷。作为一个怕麻烦的懒人，对于前端的繁杂工作当然是要找一个自动化工具来处理，于是我遇到了。从(大约)2014年开始,前端不再是当初那个切图排版的前端了，各种MV*框架、库、工具呈井喷之势层出不穷。构建工具比较有名的如Grunt、Gulp、Yeoman、webpack；依赖管理比如bower、npm，当然最流...

xiongzenghui 2019-08-21 10:51 评论0 收藏0
浅析git

摘要：浅析笔者在此整理了常见的命令，的重要性无需多言，与其再百度海中搜索命令，不妨尝试收藏笔者的此篇作品。旨在快速高效地处理无论规模大小的任何软件工程。其最大特色就是分支及合并操作非常快速简便。浅析git 笔者在此整理了常见的git命令，git的重要性无需多言，与其再百度海中搜索git命令，不妨尝试收藏笔者的此篇作品。希望对你的学习有所帮助。版本控制系统之git Git: (一)简介：G...

explorer_ddf 2019-08-02 11:53 评论0 收藏0