zoukankan      html  css  js  c++  java
  • node笔记——gulp修改静态文件的名字

    cmd小技巧:

    1、换到下级或同等级目录  

     D:

    2、换到上级目录

    cd..

    node 包管理器小技巧[以gulp为例]

    npm install --save-dev gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector 等等插件

    gulpfile.js中的代码

    var gulp = require('gulp'),                        //基础库
        clean = require('gulp-clean'),                 //清空文件夹
        minify = require('gulp-minify-css'),           //css压缩
        rename = require('gulp-rename'),               //文件重命名
        revContent = require('gulp-rev'),                     //更改版本名
        revCollector = require('gulp-rev-collector'),     //gulp-rev的插件,用于html文件更改引用路径
        concat = require('gulp-concat'),               //合并多个文件
        notify = require('gulp-notify'),               //提示
        htmlreplace = require('gulp-html-replace'),
        replace = require('gulp-replace'),
        htmlmin = require('gulp-htmlmin'),
        livereload = require('gulp-livereload');
    
    gulp.task('clean',function(){
        return gulp.src('build',{ read : false})       //src的第二个参数的{read:false},是不读取文件,加快程序。
            .pipe(clean());
    })
    gulp.task('index',['clean'],function(){
        return gulp.src('app/index.html')
            .pipe(rename(function(path){
                path.basename ='index';
                path.extname = ".html";
            }))
            .pipe(gulp.dest('build/'))
    })
    gulp.task('css',['index'],function(cb){
        return gulp.src('app/**/*.css')
            .pipe(minify())
            .pipe(concat('main.css'))
            .pipe(revContent())
            .pipe(gulp.dest('build/css'))
            .pipe(revContent.manifest())
            .pipe(gulp.dest('build/rev'));
    })
    gulp.task('revcss',['css'],function(){
        return gulp.src(['build/rev/*.json','build/*.html'])
            .pipe(revCollector({replaceReved: true}))//一定需要设置参数为true  否侧不会替换上一次的值
            .pipe(gulp.dest('build/'))
            .pipe(notify("success!!!"))
    })
    

    目录结构

      

    效果图

  • 相关阅读:
    2017.9.29 ubuntu安装mysql服务
    如何在树莓派上安装mjpeg-streamer(针对摄像头为UVC的)
    2016.9.22感想及收获
    GL-iNET路由器如何安装DDNS服务
    2016.7.5 记项目过程中犯的一个从未察觉的低级错误
    C++课程笔记 Lesson 01
    关于Jlink在linux系统下连接错误的解决方法
    如何通过命令提示符进入MySQL服务器
    java面试题
    hive面试题
  • 原文地址:https://www.cnblogs.com/MonaSong/p/5842808.html
Copyright © 2011-2022 走看看