gulp的安装

gulp的安装

    基于node环境的安装步骤

 
 
    //全局安装gulp
    npm install -g gulp
    //package.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",
        "gulp-cache": "^0.4.5",
        "gulp-concat": "^2.6.1",
        "gulp-cssnano": "^2.1.2",
        "gulp-htmlmin": "^3.0.0",
        "gulp-if": "^2.0.2",
        "gulp-imagemin": "^3.1.1",
        "gulp-less": "^3.3.0",
        "gulp-minify-css": "^1.2.4",
        "gulp-uglify": "^2.0.1",
        "gulp-useref": "^3.1.2"
      }
    }
    //在项目根目录下进行依赖安装
    npm install --save-dev gulp
    //在项目根目录下创建一个名为gulpfile.js的文件(名字必须是gulpfile.js)
    var gulp = require('gulp');
    gulp.task('default', function () {
        console.log('这是默认执行的任务')
    })
    //在终端项目文件夹中输入gulp命令则会默认执行default中的命令

实例

 
 
    var gulp = require('gulp'),
    minify = require('gulp-minify-css'),//css压缩
    concat = require('gulp-concat'),//文件合并
    uglify = require('gulp-uglify'),//js压缩
    rename = require('gulp-rename'),//文件重命名
    imagemin = require('gulp-imagemin'),//压缩图片
    clean = require('gulp-clean'),//清空文件夹
    rev = require('gulp-rev'),//更改版本号
    revCollector = require('gulp-rev-collector');//gulp-rev插件，用于html模板更改引用路径
    //需要使用的插件必须先进行依赖引入
    npm install gulp-less --save-dev
    npm install gulp-cssnano --save-dev
    npm install gulp-useref --save-dev
    npm install gulp-uglify --save-dev
    npm install gulp-if --save-dev
    npm install gulp-minify-css --save-dev
    npm install gulp-imagemin --save-dev
    npm install gulp-concat --save-dev
    npm install gulp-cache --save-dev
    npm install gulp-htmlmin --save-dev
    Browser Sync自动刷新：npm install browser-sync --save-dev
    //压缩静态资源到指定文件夹
    gulp.src()里面是需要压缩文件的目标地址 
    gulp.dest()里面是压缩文件存放地址 
    rename可以更改压缩文件的名字，根据需要进行设置
    //压缩css
gulp.task('minifyCss', function(){
    return gulp.src('public/css/*.css')
            .pipe(rename({suffix: '.min'}))
            .pipe(minify())
            .pipe(concat('main.css'))
            .pipe(gulp.dest('dist/css'));
    });
    //压缩js
    gulp.task('minifyJs', function(){
        return gulp.src('public/js/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('dist/js'));
    });
    //压缩图片
    gulp.task('minifyImg', function(){
        return gulp.src('public/img/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/image'));
    });
    //合并资源
    gulp.task('minifyCss', function(){
        return gulp.src('public/css/*.css')
            .pipe(minify())
            .pipe(concat('main.css'))
            .pipe(gulp.dest('dist/css'));
    });
    //concat()里面是合并后文件名
    //版本控制
    gulp.task('minifyCss', function(){
        return gulp.src('public/css/*.css')
            // .pipe(rename({suffix: '.min'}))
            .pipe(minify())
            .pipe(concat('main.css'))
            .pipe(rev())
            .pipe(gulp.dest('dist/app/css'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('dist/css'));
    });
    //rev.manifest()会生成一个manifest.json文件
    //.pipe(rev())会自动在原先文件名上添加随机序号