Score
0
Watch 2 Star 1 Fork 1

w404 / gulpNodeJS

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
用gulp编译less,压缩css,压缩js,版本控制等等 spread retract

Clone or download
w404 authored update
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

前端构建工具gulp教程

###第1步:安装node

首先,最基本也最重要的是,我们需要搭建node环境。访问 nodejs.org,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。npm会随着安装包一起安装,稍后会用到它。 为了确保Node已经正确安装,我们执行几个简单的命令。

    node -v
    npm -v

如果这两行命令没有得到返回,可能node就没有安装正确,进行重装。

###第2步:安装gulp

首先我们要全局安装一遍:

    npm install -g gulp

运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

    gulp -v

###第3步:新建package.json文件

package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件; 大概配置如下(注意:json文件内是不能写注释的,复制下列内容请删除注释):

    {
      "name": "test",   //项目名称(必须)
      "version": "1.0.0",   //项目版本(必须)
      "description": "This is for study gulp project !",   //项目描述(必须)
      "homepage": "",   //项目主页
      "repository": {    //项目资源库
        "type": "git",
        "url": "https://git.oschina.net/xxxx"
      },
      "author": {    //项目作者信息
        "name": "surging",
        "email": "surging2@qq.com"
      },
      "license": "ISC",    //项目许可协议
      "devDependencies": {    //项目依赖的插件
          "gulp": "^3.8.11",
          "gulp-less": "^3.0.0"
      }
    }

推荐更为效率的方法:命令提示符执行npm init,然后根据提示一步一步的配置。

###第4步:本地安装gulp以及gulp插件(以gulp-less为例)

进入项目根目录进行安装

    npm install gulp --save-dev

###第5步:新建gulpfile.js文件(重要)

gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可) 大概配置如下:

    //导入工具包 require('node_modules里对应模块')
    var gulp = require('gulp'), //本地安装gulp所用到的地方
        less = require('gulp-less');
    //定义一个testLess任务(自定义任务名称)
    gulp.task('testLess', function () {
        gulp.src('src/less/index.less') //该任务针对的文件
            .pipe(less()) //该任务调用的模块
            .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
    });
    gulp.task('default',['testLess', 'elseTask']); //定义默认任务
    //gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
    //gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组) 
    //gulp.dest(path[, options]) 处理完后文件生成路径

到这里,我们前期准备工作就算已经完成。

###第6步:运行

可以运行单独的任务,例如

    gulp default
    gulp watch

也可以运行整个任务

    gulp

###总结

  1. 安装node
  1. 安装gulp
  2. 新建package.json文件
  3. 本地安装gulp以及gulp插件(以gulp-less为例)
  4. 新建gulpfile.js文件(重要)
  5. 运行

###快速使用:下载项目,把package.json放到自己的项目中,在命令行中进入项目路径,然后执行npm install安装依赖插件,最后把gulpfile.js放在自己的项目中,里面涵盖了less编辑,js压缩,css压缩,版本控制等基本功能,注意里面的文件路径,请自行改成自己的相应的路径。

Comments ( 0 )

Sign in for post a comment

NodeJS
1
https://gitee.com/w404/gulp.git
git@gitee.com:w404/gulp.git
w404
gulp
gulp
master

Help Search