利用gulp.js压缩css,js文件流程

guyan0319 发布于2019-08-20 17:21 / 1849人阅读

摘要：并且重新输出所有数据，因此你可以将它到多个文件夹。如果某文件夹不存在，将会自动创建它。注意和的时候要引用对哦

看流程之前肯定得先了解一下gulp.js吧,附上链接,大家自己去看APIgulp.js中文网
下面就来说说怎么使用gulp.js,gulp.js是基于node来使用的,那么问题又来了,nodejs怎么安装,这个大家还是去菜鸟教程看一下;这里就不多说了;
第一步.在终端输入

node -v
查看一下你的nodejs是否安装成功,如果安装成功, 就会提示你的版本 ,我的是 v4.4.4;

第二步.全局安装gulp

sudo npm install gulp@latest -g

第三部.安装项目的开发依赖

sudo npm install --save-dev gulp

第四步.在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require("gulp");

gulp.task("default", function() {
// 将你的默认的任务代码放在这
});

第五步.安装压缩的模块

css安装模块, gulp-minify-css模块;在命令行输入,
sudo npm install gulp-minify-css
安装成功以后会提示你,警告"
npmWARNdeprecated gulp-minify-css@1.2.4: Please use gulp-clean-css",那你就需要再次安装一下
sudo npm install gulp-clean-css,
安装成功以后就可以用啦;
js模块,gulp-gulify
sudo npm install gulp-uglify@latest
好啦,两个都安装成功了,接下来就是使用的时候啦;直接上代码

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var minfy = require("gulp-minify-css");
// 创建压缩任务
gulp.task("default", function() {
    // gulp.src(path)的参数可以为tring也可以为Array,
            //每一个元素都是你要压缩的文件的相对路径
       gulp.src(["./static/js/a.js",
                   "./static/js/b.js",
                   "./static/js/c.js",
                   "./static/js/d.js",])
            .pipe(uglify())
       // gulp.dest(path)能被 pipe 进来，并且将会写文件。
       //并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。
       // 如果某文件夹不存在，将会自动创建它。
            .pipe(gulp.dest("./static/min.js"));

       gulp.src(["./static/css/a.css",
                   "./static/css/b.css",
                   "./static/css/c.css",
                   "./static/css/d.css"])
            .pipe(minfy())
            .pipe(gulp.dest("./static/min.css"));

});

注意js和css,pipe的时候要引用对哦

海外云主机服务器托管 JS CSS 压缩 js压缩文件 js压缩语音文件怎么将js压缩文件

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

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

gulp详细基础教程

摘要：核心概念流流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型，设置输出路径以某个路径的某个组成部分为基础向后拼接。一、gulp简介 1.gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工...

xuhong 2019-08-28 18:16 评论0 收藏0
gulp详细基础教程

摘要：核心概念流流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型，设置输出路径以某个路径的某个组成部分为基础向后拼接。一、gulp简介 1.gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工...

vibiu 2019-08-21 10:38 评论0 收藏0
gulp详细基础教程

摘要：核心概念流流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。类型，设置输出路径以某个路径的某个组成部分为基础向后拼接。一、gulp简介 1.gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工...

张金宝 2019-08-01 14:51 评论0 收藏0
用gulp+mock实现前后端分离

摘要：当然需要的工具不只有这些，其他的一些可选工具还有文件压缩压缩时用到的文件重命名检查一般编辑器自带校验提示工具等等，具体根据项目需要安装。 gulp 前端自动化构建工具需要配置nodejs环境, 利用npm安装全局gulp,安装后可以输入gulp指令。 npm install gulp -g 创建项目目录、初始化npm包、gulp npm init gulp init 下载gul...

dailybird 2019-08-20 18:08 评论0 收藏0
学习前端自动化构建工具Gulp

摘要：是基于的自动任务运行器，她能自动化的完成等文件的测试检查合并压缩格式化浏览器自动刷新部署文件生成，并监听文件改动后重复这些步骤。易于学习通过最少的，掌握毫不费力，构建工作尽在掌握如同一系列流管道。 Gulp是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且能帮我们完成前端开发过程中的很多重复的任务，使用它，可以大大提高我...

muzhuyu 2019-08-19 17:43 评论0 收藏0