• 前端构建工具:gulp的配置与使用


    安装gulp

    因为gulp是基于node的管理工具,所以要先安装nodejs
    安装nodejs
    nodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.org/en/
    下载后直接运行.msi文件
    安装完成后,打开命令行(win+R)键入node -查看node版本

    全局安装gulp

    npm install -g gulp

    在项目目录下安装gulp,若要在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:
    (项目目录下安装gulp打开命令行方式:shift+鼠标右键–>选择在此处打开命令行)

    npm install gulp --save-dev

    使用gulp -v查看是否成功安装(图左:全局查看gulp是否成功安装,图右:项目目录查看gulp是否成功安装)

    使用gulp
    创建gulpfile.js文件

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

    创建package.json文件

    npm init

    运行gulp任务

    在项目下打开命令行键入gulp , 执行任务.如下图

     

    gulpAPI

    gulp.src()

    用来读取文件

    gulp.src(globs[, options])

    gulp.dest()

    用来写文件

    gulp.dest(path[,options])

    gulp.task()

    用来定义任务

    gulp.task(name[, deps], fn)

    gulp.watch()

    用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。例如

    gulp.watch(glob[, opts], tasks)

     gulp常用插件安装命令

    重命名文件

    npm install --save-dev gulp-rename
    css压缩
    npm install --save-dev gulp-minify-css
    js文件压缩
    npm install --save-dev gulp-uglify
    文件合并
    npm install --save-dev gulp-concat
    编译less
    npm install --save-dev gulp-less
    编译sass
    npm install --save-dev gulp-sass
    图片压缩
    npm install --save-dev gulp-imagemin
    include
    npm install gulp-file-include
    使用gulp插件

    项目目录结构

    示例路径配置

    option = {//编译后存放文件的目录
            buildpath :'dist'
        }
    coding={//开发目录
            buildpath :'src'
        }

     css文件压缩

    安装:npm install –save-dev gulp-minify-css
    var gulp = require( 'gulp'),
    rename = require('gulp-rename')//重命名
    minifycss = require('gulp-minify-css');
    
    gulp.task('minifycss', function() {
        return gulp.src('src/css/!*.css')      //压缩的文件
            .pipe(rename({suffix: '.min'})) //重命名文件
            .pipe(gulp.dest('dist/css'))   //输出文件夹
            .pipe(minifycss());   //执行压缩
    });

    编译less

    安装:npm install –save-dev gulp-less
    var gulp = require('gulp'),
    less = require('gulp-less');//编译less
    gulp.task('less',function(){
        return gulp.src(coding.buildpath +'/less/*.less') //less文件路径
            .pipe(less())
            .pipe(gulp.dest(option.buildpath + '/css/'))//输出文件夹
    })

    编译sass

    安装:npm install –save-dev gulp-sass
    var gulp = require('gulp'),
    sass = require(('gulp-sass');
    gulp.task('sass',function(){
        return gulp.src(coding.buildpath +'/sass/*.scss')//sass文件路径
            .pipe(sass())
            .pipe(gulp.dest(option.buildpath +'/css/'))//输出文件夹
    })

    js文件压缩

    安装:npm install –save-dev gulp-jshint
    var gulp = require('gulp'),
    uglify = require('gulp-rename'), //重命名
    uglify = require('gulp-uglify');
    
    gulp.task('minifyjs', function () {
        gulp.src(coding.buildpath + '/js/*.js')//文件压缩前的路径
            .pipe(uglify())  //压缩
            .pipe(rename({suffix: '.min'}))//会将*.js重命名为*.min.js
            .pipe(gulp.dest(option.buildpath + '/js/'));//文件压缩后的存放路径
    });

    图片压缩

    安装:npm install gulp-imagemin imagemin-pngquant –save-dev
    var gulp = require('gulp'),
    uglify = require("gulp-uglify"), //重命名
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');
    
    gulp.task('imagemin',function(){
        return gulp.src(coding.buildpath+ '/image/*')
           .pipe(imagemin({
                progressive:true,//无损压缩jpg图片
                svgoPlugins: [{removeViewBox: false}] // 不移除svg的viewbox属性
                use:[pngquant()] //使用pngquant来压缩png图片
            }))
            .pipe(imagemin())
            .pipe(gulp.dest(option.buildpath+'/image/'))
    })

    合并文件

    安装:npm install gulp-concat –save-dev
    var gulp = require('gulp'),
    concat = require('gulp-concat');
    gulp.task('concat',function(){
        return gulp.src(coding.buildpath +'/css/*.css')
            .pipe(concat('all.min.css'))
            .pipe(gulp.dest(option.buildpath + '/css/'))
    })

    清理文件

    安装:npm install del –save-dev
    var gulp = require('gulp'),
    del = require('del');
    gulp.task('clean',function(cb){
        return   del([option.buildpath],cb);
    })

    监听文件(无需另外安装)

    gulp.task('watchImgs',function(){
        gulp.watch([coding.buildpath + '/image/**'],['imagemin']);
    })
    gulp.task('watchJs',function(){
        gulp.watch([coding.buildpath + '/js/**'],['minifyjs'])
    })

    include

    安装:npm install gulp-file-include
    gulp.task('include',function(){
        return gulp.src(coding.buildpath + '/page/*.html')
            .pipe(include({
                prefix: '@@',
                basepath: '@file'
            }))
            .pipe(gulp.dest(option.buildpath + '/page/'))
    })

    编译前

    编译后

     执行任务

    gulp.task('watch',['watchJs'])
    gulp.task('default',[('clean'], function () {
        gulp.start('minifyjs','less','concat','sass','imagemin','include');
    });

    启动watch

    gulp watch(项目目录下,在命令行中输入)

    执行task任务

    gulp(项目目录下,在命令行中输入)
    
    执行单个任务 : gupl task名称(例如 gulp include)
     
  • 相关阅读:
    个人第四次作业
    个人第四作业
    英语学习app——Alpha发布2
    英语学习app——Alpha发布1
    团队作业---系统设计
    团队第二次作业:需求分析
    第三次作业:结对编程
    团队第一次作业
    Web测试实践 第二天
    Web测试实践 第一天
  • 原文地址:https://www.cnblogs.com/jyichen/p/5382938.html
Copyright © 2020-2023  润新知