npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-usels

v1.0.5

Published

a front-end build system that use localstorage to cache files

Downloads

1

Readme

gulp-usels

A front-end build system that use localstorage to cache res

gulp-usels是什么?

gulp-usels(gulp-use-localstorage)是一个前端构建工具,类似于gulp-useref, 可以同lsrequire.js结合使用,从而做到基于localstorage的缓存

gulp-usels能做什么?

  • 通过特点语法解析页面中jscss的引用
  • 将引用的jscss进行合并、注入
  • 自带版本控制,基于md5文件重命名,缓存控制更科学,更简单
  • 结合lsrequire.js,可以做到用localstorage本地缓存js甚至css文件,提高缓存命中率,节省浏览,极大减少请求数
  • 基于gulp,RPY,自由搭配各种工具如uglifyjs、cssmin、imagemin等等

gulp-usels怎么用?

var gulp = require('gulp')
var gulpif = require('gulp-if')
var uglify = require('gulp-uglify')
var cssmin = require('gulp-cssmin')
var usels = require('gulp-usels')
var prefix = {
        "{{res}}": "../res",
        '//geekie.online': '../res'
}
gulp.task('test',function(){
    gulp.src('./src/website/**/*.html')
        .pipe(usels(prefix))
        //.pipe(gulpif('*.js',uglify()))
        //.pipe(gulpif('*.css',cssmin()))
        .pipe(gulp.dest('./dist/website'))
        .pipe(usels.rewrite())
        .pipe(gulp.dest('./dist/website'))
})

API

usels(prefix)

var usels = require('gulp-usels')
var prefix = {
        "{{res}}": "../res",
        '//geekie.online': '../res'
}
gulp.task('test',function(){
    gulp.src('./src/website/**/*.html')
        .pipe(usels(prefix))
        //stream流过的时候,通过gulpif判断类型
        //可以做压缩处理
        //.pipe(gulpif('*.js',uglify()))
        //.pipe(gulpif('*.css',cssmin()))
        .pipe(gulp.dest('./dist/website'))
        //如果用到了@path模式,需要重写path中的引用文件
        //以适配lsrequire.js
        .pipe(usels.rewrite())
        .pipe(gulp.dest('./dist/website'))
})

prefix

prefix是一个key-value对象,用来对路径中的全局变量,域名等特殊字符做处理

key为路径中要替换的文本 value为相对于gulp构建时base的实际路径

比如有些文件在开发时并不是都放在web站点的根目录下,例如cdn,那么可以自定义前缀,让gulp-usels在编译时将此类特殊变量(如域名,后台模板的变量)转义成指定目录。

gulp-usels语法说明

说明

[],表示变量

解析标识块

<!--@start-->
<!--@end-->

<!--@start--><!--@end-->中的内容,会被gulp-usels解析

编译目标语言

<!--@compile:[param]-->

表示代码块内的内容,是那种语言,[param]可以是jscss

合并文件

<!--@file:[file]-->

代码块内的引用文件,会合并为[file]的指定文件

例子

<!--@start-->
<!--@compile: js-->
<!--@file: /static/js/concat.js-->
<script src="/static/js/file1.js"></script>
<script src="/static/js/file2.js"></script>
<script src="/static/js/file3.js"></script>
<!--@end-->

编译后输出为

<script src="/static/js/concat.[md5].js"></script>

注入文件

<!--@inject: true-->

代码块内的引用文件,会合并并注入到html中

path模式(适配lsrequire.js)

<!--@base: [base]-->
<!--@ignore: [path to ignore]-->
<!--@path: [path]-->

例子

源码

<!--@start-->
<!--@compile: js-->
<!--@base: //blog.geekie.online-->
<!--@ignore: /static/js/-->
<!--@path: js-->
<script type="text/javascript" src="/static/js/test-path/test-path-1.js"></script>
<script type="text/javascript" src="/static/js/test-path/test-path-2.js"></script>
<script type="text/javascript" src="/static/js/test-path/test-path-3.js"></script>
    <!--@start-->
    <!--@compile: js-->
    <!--@file: //blog.geekie.online/js/test-path-file-combo.js-->
    <script type="text/javascript" src="{{res}}/js/test-path/test-path-file-1.js"></script>
    <script type="text/javascript" src="{{res}}/js/test-path/test-path-file-2.js"></script>
    <!--@end-->
<!--@end-->

输出后

<script type='text/javascript'>
if(typeof __require__ == 'undefined'){
    var __require__ = {
        requireArray:[],
        config: function(param){
            this.requireArray.push(param)
        }
    }
}
__require__.config({
    baseUrl: '//blog.geekie.online',
    deps: {"js/test-path/test-path-1.js":"11a942de37","js/test-path/test-path-2.js":"6a371c9354","js/test-path/test-path-3.js":"60d8df8802","js/test-path-file-combo.js":"3bc8b5d5ec"},
})
</script>

代码块内的文件,输出到path的指定路径

@base

path块中,包裹的js或css将会输出到指定路径的根目录

@base可以匹配prefix中的规则,输出到指定路径

@path

path块中,包裹的js或css将会输出到从@base指定的根目录出发的 相对路径

举例 prefix: { "//blog.geekie.online": "[glob]" }

@base: //blog.geekie.online

@path: js/foojs/

此时,文件将输出到[glob]/js

@ignore

@path中的src的路径将会被忽略的部分 举例 @ignore: /static,那么@path中的src如 src="/static/js/foo.js"在编译时将会忽略/static

结合之前的例子,那么脚本将会被输出到 [glob]/js/foojs/js/foo.js

嵌套

@path中可以嵌套@path@file

# 路线图

  • 支持amd规范(有可能会支持cmd、commonjs规范)
  • 支持prefix配置绝对路径(目前还只支持相对于gulp.dist目录的相对路径)
  • ...