gulp详细入门教程精选整理
导读： Sass编译Css Js 图片压缩Css Js 合并Css Js 内联Html的include功能Autoprefixer自动刷新去缓存Handlebars模板文件的预编译雪碧图ESLint rem移动端适配方案 1.下载链接：...
Sass编译Css Js 图片压缩Css Js 合并Css Js 内联Html的include功能Autoprefixer自动刷新去缓存Handlebars模板文件的预编译雪碧图ESLint rem移动端适配方案
1.下载链接：
2.安装
3. node -v 查看node的版本号
4. npm -v 查看npm的版本号
安装：npm install gulp -g
点击查看大图
gulp -v 查看gulp的版本号
说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
安装：命令提示符执行 npm install cnpm -g – registry=
点击查看大图
cnpm -v 查看gulp的版本号(安装成功)
进入项目目录
在项目目录下生成文件：命令提示符执行 npm init / cnpm init
在指定目录下会生成一个package.json的文件（cmd中输入：package.json）、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：
注：如果想全部使用默认配置可使用 "npm init -y/ cnpm init -y" 不询问直接创建 package.json 文件
我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。
安装：npm install gulp --save-dev
点击查看大图
gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。
它大概是这样一个js文件：
需要什么功能就安装什么模块，命令详见下图
点击查看大图
当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,‘minifycss’]。
成功将src/less下的index.less编译成src/css下的index.css和压缩成src/cssmin下的index.css
点击查看大图
先生成：gulp build
再监听：gulp dev
具体配置的小细节在github上：
执行后，js和css出现如下情况
此时需要改下文件夹中的几个配置文件
修改完成保存后再执行即可
gulp 给静态资源文件添加hash(md5)后缀 防止缓存gulp-connect实现页面实时自动刷新gulp-imagemin、gulp-tinypng-compress、gulp-tinypng-nokey图片压缩优化详解及对比
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： gulp详细入门教程精选整理
本文地址： https://pptw.com/jishu/661528.html