使用Gulp进行Javascript以及css压缩合并

sixgo 发布于2019-08-28 18:28 / 661人阅读

摘要：完成安装之后，需要使用安装。此时项目根目录下会多出下面这个文件夹好的，现在已经安装完成了，但是本身不提供压缩合并等功能，需要使用的相关插件。使用，现在可以使用了，在项目根目录下创建文件。任务完成，只需要将中，引用的路径修改成新的路径即可。

1.安装gulp

gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs，安装nodejs。

完成nodejs安装之后，需要使用npm安装gulp。

先安装全局gulp

npm install -g gulp
然后在项目根目录下安装本地gulp。

此时项目根目录下会多出下面这个文件夹 node_modules

好的，现在gulp已经安装完成了，但是gulp本身不提供js压缩合并等功能，需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能，先安装相应的插件：

1.css压缩　　gulp-minify-css

2.js压缩　　　gulp-uglify

3.js合并　　　gulp-concat　　

由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：

4.重命名　　 gulp-rename

5.js代码检测　 gulp-jshint　(或gulp-jslint)

(更多插件可以查看 http://gulpjs.com/plugins/ )

在项目根目录下执行以下命令：

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安装好的插件会出现在上面提到的node_modules文件夹中。

2.使用gulp

ok，现在可以使用gulp了，在项目根目录下创建gulpfile.js文件。

在gulpfile.js中添加以下代码

var gulp = require("gulp")，
    minifycss = require("gulp-minify-css")，
    concat = require("gulp-concat")，
    uglify = require("gulp-uglify")，
    rename = require("gulp-rename")，
    jshint=require("gulp-jshint");
    //语法检查
    gulp.task("jshint"， function () {
        return gulp.src("js/*.js")
            .pipe(jshint())
            .pipe(jshint.reporter("default"));
    });
    //压缩css
    gulp.task("minifycss"， function() {
        return gulp.src("css/*.css")    //需要操作的文件
            .pipe(rename({suffix: ".min"}))   //rename压缩后的文件名
            .pipe(minifycss())   //执行压缩
            .pipe(gulp.dest("Css"));   //输出文件夹
    });
    //压缩，合并 js
    gulp.task("minifyjs"， function() {
        return gulp.src("js/*.js")      //需要操作的文件
            .pipe(concat("main.js"))    //合并所有js到main.js
            .pipe(gulp.dest("js"))       //输出到文件夹
            .pipe(rename({suffix: ".min"}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest("Js"));  //输出
    });
　　//默认命令，在cmd中输入gulp后，执行的就是这个任务(压缩js需要在检查js之后操作)
    gulp.task("default"，["jshint"]，function() {
        gulp.start("minifycss"，"minifyjs"); 
　　});

上述代码中的相关方法可以查看 gulp API docs

在文件根目录下执行gulp命令：

(如果Js文件有问题时，会出现相应的error提示，按照提示的错误信息修改即可)

bingo，现在可以在css文件夹中看到压缩好的css文件，在js中可以看到合并压缩好的main.min.js 。任务完成，只需要将html中css，js引用的路径修改成新的路径即可。

增加Sass

npm install gulp-sass --save-dev

"use strict";
 
var gulp = require("gulp");
var sass = require("gulp-sass");
 
gulp.task("sass", function () {
  gulp.src("./sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css"));
});
 
gulp.task("sass:watch", function () {
  gulp.watch("./sass/**/*.scss", ["sass"]);
});

云服务器 GPU云服务器亚马逊云服务器租用以及使用 JS CSS 压缩 javascript 压缩 javascript压缩

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

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

使用Gulp进行Javascript以及css压缩合并

摘要：完成安装之后，需要使用安装。此时项目根目录下会多出下面这个文件夹好的，现在已经安装完成了，但是本身不提供压缩合并等功能，需要使用的相关插件。使用，现在可以使用了，在项目根目录下创建文件。任务完成，只需要将中，引用的路径修改成新的路径即可。 1.安装gulp gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs，安装nodejs。完成nodejs安装之后，需要使用n...

codeKK 2019-08-19 17:17 评论0 收藏0
webpack 3 零基础入门教程 #1 - 介绍

摘要：所以它在某些程度上，跟的功能有些相同。严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。更是明显强调模块化开发，而那些文件压缩合并预处理等功能，不过是他附带的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先来说一下 webpack 是什么。 webpack 的...

张红新 2019-08-21 17:55 评论0 收藏0
使用 Gulp 自动化构建工具快速搭建项目

摘要：通过本文，我们将学习如何使用来改变开发流程，从而使开发更加快速高效。中文网站详细入门教程使用是基于的，需要要安装为了确保依赖环境正确，我们先执行几个简单的命令检查。详尽使用参见官方文档，中文文档项目地址为了UED前端团队更好的协作开发同时提高项目编码质量，我们需要将Web前端使用工程化方式构建；目前需要一些简单的功能： 1. 压缩HTML 2. 检查JS 3. 编译SA...

glumes 2019-08-20 15:57 评论0 收藏0
前端构建工具整理

摘要：常见前端构建工具的分类和对比是附带的包管理器，是内置的一个功能，允许在文件里面使用字段定义任务在这里，一个属性对应一段脚本，原理是通过调用去运行脚本命令。前文端技术范围不断发展，前端开发不仅限于直接编写html，css和javascript，Web应用日益庞大，代码也更加庞大，因此许多新的思想（例如模块化和工程化等）和框架（React和Vue等），以及新的语言（Es6 TypeSc...

leo108 2019-08-23 10:53 评论0 收藏0
gulp 使用案例

摘要：使用案例引入检测文件模块引入压缩模块引入合并文件模块引入压缩模块引入压缩的模块引入压缩图片插件代码来转换中的样式自动加上浏览器前缀解决方案设计稿宽，那么，即代码中写编译后转化成静态服务器处理文件检测压缩合并文件 gulp 使用案例 var gulp = require(gulp); var jshint = require(gulp-jshint); // 引入检测js文件模块 var...

svtter 2019-08-26 11:43 评论0 收藏0