Gulp使用教程(二):gulp配置与插件使用
作者 Viliam | 发布于 2015-11-13
Gulp

当你用命令能查到gulp版本的时候,说明gulp安装成功,如何运行还需要进行配置与结合插件一起使用。

步骤一:打开我的电脑-E盘(也可以是其他磁盘),右键新建一个文件夹,命名为gulp

步骤二:回到命令行窗口,切换到这个路径E:/gulp

如图所示:

用命令新建package.json文件,也就是gulp的配置文件,package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件

步骤三:切好到E:/gulp这个目录后,继续执行命令 cnpm init

    cnpm init

然后按下图操作

如图所示:

步骤四:接着开始安装gulp插件,执行下面命令,每执行一个命令就会自动下载一个插件,记得目录还是需要在package.json文件同一个目录下

    cnpm install gulp-less --save-dev
    cnpm install gulp-uglify --save-dev
    cnpm install gulp-imagemin --save-dev
    cnpm install gulp-minify-css --save-dev
    cnpm install gulp-htmlmin --save-dev
    cnpm install gulp-rename --save-dev
    cnpm install gulp-concat --save-dev
    cnpm install gulp-clean --save-dev

    这些命令安装的插件是用于
    //编译LESS
    //压缩JS
    //压缩images
    //压缩CSS
    //压缩html
    //重命名文件
    //合并文件
    //清空文件夹

安装完插件,需要调用它

步骤五:在package.json文件旁边手动新建一个JS文件,名为gulpfile.js,内容请复制下面区域

var gulp=require('gulp');
var gulpless = require ("gulp-less");   //编译LESS

gulp.task('myless', function () {
    gulp.src('src/less/*.less') //本机的路径(绝对路径相对路径都可以,绝对路径如:D:/phpStudy/WWW)
        .pipe(gulpless())
        .pipe(gulp.dest('src/css/'));
         //该任务调用的模块

写完后,用命令行运行gulp myless ,会发现提示尝试运行npm install gulp

如图所示:

步骤六:可能用cnpm命令安装gulp并没有成功,好吧,再安装一次也无所谓,打开命令行,切换到目录D:/gulp后,执行

    npm install gulp

等待上面的自动安装完毕后,查看gulp的版本,执行命令:gulp -v ,就会出现

如图所示:

步骤七:这时候就可以运行任务了吧,执行:gulp myless 然后就会出现编译所花的时间,再到D:/gulp/src/css/ 的路径下,就会发现编译好的CSS文件

如图所示:

如图所示:

这里只拿了gulp来编译Less举例

原文地址:http://www.ydcss.com/archives/18

本站说明

前端开发、体验、交互、设计、技术、分享 i--do.com,包含javascript、html、css、nodeJS、demo展示等。转载文章请标注文章来源。

联系我

E-Mail: 709694072@qq.com