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图片压缩优化详解及对比