关于大口安装、包装和合并的教程

序

大口是前端开发过程中构建代码的工具，也是构建自动化项目的利器；她不仅可以优化网站资源，还可以使用正确的工具自动完成开发过程中的许多重复性任务；利用她，我们不仅可以愉快地编写代码，还可以大大提高我们的工作效率。

安装、打包和合并

1.安装节点. js下载地址：http://nodejs.cn/

打开命令行node.js，输入：node -v v，如果有版本号，就能正确安装。

2.安装淘宝镜像：命令行输入：

npminstall-gcnpm-registry=http://registry.npm.taobao.org目的：使下载速度更快。

3.全球安装大口

Cnpm安装-全球gulp4。创建一个目录，打开f驱动器，创建一个大口文件夹。

命令行输入：

F:cd gulp5。安装本地大口

cnpm install-save-dev glow 6。创建package.json文件

Cnpm初始化只需一路输入确认即可

7.7.web编辑器打开这个大口目录，比如hbuilder和webstorm。

在gulf目录下创建gulpfile.js文件，这是gulf运行的入口

8.确定什么样的包装压缩，html，js，css，img

9.js封装

var大口=require('大口')；var concat=require('大口-concat ')；var uglify=require('大口-uglify ')；glaugh . task(' default '，function(){ glaugh . src(' js/*)。js’)//路径问题：gulpfile.js是路径的起点。该路径表示js文件下的所有js文件。管道(concat('all.js')) //合并后的js文件名。管道(uglify()) //压缩。管道(大口。dest(' build '))；//在构建目录中打包和压缩。});10.运营；输入node.js

吞咽

将会出现一个错误，表明没有安装gung-concat组件。开始安装：cnpm安装

再跑一次：大口地喝

再次报告错误，表明未安装垃圾组件。开始安装：cnpm安装

再跑一次：大口地喝。。

成功之后，它会

您可以在这里看到已完成的“default ”,这是grave . task启动的默认条目。如果您创建多个任务并修改任务名称，例如：

var大口=require('大口')；var concat=require('大口-concat ')；var uglify=require('大口-uglify ')；glaugh . task(' default '，function(){ glaugh . src(' js/*)。js’)//路径问题：gulpfile.js是路径的起点。该路径表示js文件下的所有js文件。管道(concat('all.js')) //合并后的js文件名。管道(uglify()) //压缩。管道(大口。dest(' build '))；//在构建目录中打包和压缩。}) //css打包压缩var autoprefix=require(' gout-autoprefix ')；var minifyCSS=require(' gout-minify-CSS ')；govern . task(' style '，function(){//任务名称为style govern . src('。CSS/*。CSS ')。管道(concat(' style . CSS ')。管道(autoprefix ('last2versions ')。管道(minifycss })；再跑一次：大口地喝

结果：

您会发现只有默认任务在运行。因为这是唯一默认的大口执行条目。

修改如下

var大口=require('大口')；var concat=require('大口-concat ')；var uglify=require('大口-uglify ')；gough . task(' js '，function(){ gough . src(' js/*)。js’)//路径问题：gulpfile.js是路径的起点。该路径表示js文件下的所有js文件。管道(concat('all.js')) //合并后的js文件名。管道(uglify()) //压缩。管道(大口。dest(' build '))；//在构建目录中打包和压缩。}) //css打包压缩var autoprefix=require(' gout-autoprefix ')；var minifyCSS=require(' gout-minify-CSS ')；govern . task(' style '，function(){//任务名称为style govern . src('。CSS/*。CSS ')。管道(concat(' style . CSS ')。管道(autoprefix ('last2versions ')。管道(minifycss })；brg ugh . task(' default '，function(){ gugh . run([' js '，' style '])；//在此开始执行多个任务任务})；如果没有安装任何组件，我想你应该知道如何操作它。

11.图像压缩

var imagemin=require('大口-imagemin ')；gough . task(' img '，function(){ return gough . src(' img/*)。png ')。管道(imagemin())。管道(大口. dest(' miniImg '))；});12.html压缩

var htmlmin=require('大口-html min ')；gough . task(' html '，function(){ return gough . src('./*.html ')。管道(html min({ collapsewatespace : true }))。烟斗(大口。目的地('./'));});13.自己修改路径问题

将js/css打包并合并到一个文件中时订购解决方案

1.你可以点一杯。

2.可以这样写：

return glugh . src([' Js/common . Js '，Js/* */*)。js'])。管道(concat(' build . js '))//合成到一个JS . pipe(gull . dest(build base path ' JS '))//输出到JS目录。管道(uglify())//将js压缩到一个//输出到JS目录摘要

以上就是本文的全部内容。只能说功能比较多。多看看高层的博客或者官网。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。