抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

首先安装 Node.js ,此时已自带安装 npm 包管理器。

  • 全局安装 gulp

    执行$ npm install gulp -g,然后即可在命令行直接执行 gulp 命令,输入 gulp -v 查看安装版本。

  • 建立 package.json 文件

    package.json 文件储存项目的相关信息,项目根目录直接建立 package.json ,或者命令行执行 $ npm init,填写名称、描述等信息,查看帮助: $ npm help package.json

    {
      "name": "project",
      "version": "1.0.0",
      "description": "Project info",
      "main": "gulpfile.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "",
        "url": ""
      },
      "keywords": [
        ""
      ],
      "author": "Kenny",
      "license": "ISC",
      "bugs": {
        "url": ""
      },
      "homepage": "",
      "devDependencies": {
        "gulp": "^3.9.1"
      }
    }
  • 本地安装 gulp

    $ npm install gulp --save-dev

  • 创建 gulpfile.js

    首先写一个 Hello, world

    var gulp = require('gulp');
    
    gulp.task('SayHello',function(){
        console.log('Hello, world');
    })

    先引用 gulp 组件,再执行一个 SayHello 任务,执行命令: $ gulp SayHello,即可打印出 Hello, world

    日常使用中,一般都需要执行很多任务,不管多少任务,首先安装需要使用的组件,再引用组件,再分配任务,最后执行任务。

    var gulp = require('gulp'),
        //Plugins模块获取
        minifycss = require('gulp-minify-css'),
    
        //压缩src目录css文件
        gulp.task('minify-css', function() {
            return gulp.src('./src/css/*.css')
                .pipe(minifycss())
                .pipe(gulp.dest('./dist/css'));
        });
        //监控文件变化
        gulp.task('watch',function(){
            gulp.watch('src/css/*.css',['minify-css']);
        })
    
        // 执行 gulp 命令时执行的任务
        gulp.task('default', [
            'watch','minify-css'
        ]);

    这里调用了 gulp-minify-css ,所以首先需要安装: $ npm install gulp-minify-css --save-dev

    这里部署了两个任务,一个是压缩 CSS 文件,第二个是监控 CSS 原始文件,只要在命令行执行 gulp 命令即会执行这两个任务(已设置default任务名),还可以安装其它模块执行各种各样的任务,比如压缩 JS,压缩图片,压缩 HTML,文件监控,文件合并,HTML 头尾加载等等……

新模块:安装,引入,使用。

参考

gulp插件

npm的package.json中文文档

评论