在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):jbrodriguez/hugulp开源软件地址(OpenSource Url):https://github.com/jbrodriguez/hugulp开源编程语言(OpenSource Language):JavaScript 55.0%开源软件介绍(OpenSource Introduction):DEPRECATION NOTICEI'll archive the repo by the end of August 2021. The main reason is Hugo pipes are built-in and pretty much cover what Hugulp does. I think the only part missing is image optimization, but I think you can build a pipe to do it. The other reason is it badly needs an update to gulp 4 and although it doesn't seem like that hard a task, I don't have the appetite to do it. hugulp 2v2 Breaking changesIf you're using hugulp v1, please take note of the following changes:
Note: If you need sass/less/js pre-processing, read v2 docs below Description
The main idea is to recreate the famous Ruby on Rails Asset Pipeline, which minifies, concatenates and fingerprints the assets used in your website. This leads to less and smaller network requests to your page, improving overall user experience. Read this blog post and this article for additional context. Note: These articles refer to v1 It's internally driven by Gulp. This project Includes the following tools, tasks and workflows:
InstallationNode needs to be installed in your system. Then just $ npm install -g hugulp Or you can build and run using docker: # Default docker setup:
$ ./scripts/create-docker-machine-and-run-it
# -- OR --
# Run with custom machine name, specific hugo version, specific node version and run docker in detached mode:
$ ./scripts/create-docker-machine-and-run-it -a app-devel -g 0.20.6 -n 6.10.0 -d Note: You only run the Getting StartedThe most common usage scenario would be: $ hugo new site yoursite
$ cd yoursite
$ hugulp init
# create content
# add images (static/images), css (static/styles) and javascript (static/scripts)
$ hugo server -D # for development
# development is done, ready to publish
$ rm -rf public # clean up public folder, it will be re-generated by hugo
$ hugo # for release/production/deployment
$ hugulp build # optimize the site by running the asset pipeline Another scenario would be to include sass/less pre-processing: $ hugo new site yoursite
$ cd yoursite
$ hugulp init
# create content
# add images (static/images), and javascript (static/scripts)
# add sass/less (assets/styles)
$ hugo server -D # for development
$ hugulp watch # to convert sass/less (assets/styles) into css (static/styles)
# development is done, ready to publish
$ rm -rf public # clean up public folder, it will be re-generated by hugo
$ hugo # for release/production/deployment
$ hugulp build # optimize the site by running the asset pipeline In both cases, you could chain the last 3 commands: $ rm -rf public && hugo && hugulp build
This is the default {
"version": 2,
"pipeline": ["images", "styles", "scripts", "fingerprint", "html"],
"path": {
"styles": "styles",
"images": "images",
"scripts": "scripts"
},
"watch": {
"source": "assets",
"target": "static"
},
"build": {
"source": "public",
"target": "public"
},
"autoprefixer": {
"browsers": ["last 2 versions"]
},
"cleancss": {
"advanced": false
},
"htmlmin": {
"collapseWhitespace": true
},
"gifsicle": { "interlaced": true },
"jpegtran": { "progressive": true },
"optipng": { "optimizationLevel": 5 },
"svgo": {
"plugins": [{ "removeViewBox": true }, { "cleanupIDs": false }]
}
} You can easily customize Available Commandshugulp watch
It will watch for changes to styles or script files, process them and write them to hugo's static folder, according to the following table
Note: It searches the folders recursively The table above applies to You can customize the folder names: This is described in the hugulp buildIt optimizes the site that hugo built, by running the asset pipeline as defined in Additionally, files are not watched for changes hugulp versionDisplay installed version. hugulp initCreate a default ConfigurationBy editing the Description of each field follows: pipelineDefines which tasks of the asset pipeline will be executed ( Type: array "pipeline": ["images", "styles", "scripts", "fingerprint", "html"]
Let's say you don't want to fingerprint the assets. Just set pipeline to "pipeline": ["images", "styles", "scripts", "html"] By removing the fingerprint task, it will not be executed. Note that tasks are executed sequentially. pathDefines the name of the folders where your assets are located/will be transferred to. Type: object "path": {
"styles": "styles",
"images": "images",
"scripts": "scripts"
} So if you prefer your styles folder to be called css, and scripts to be called js, you would change it to: "path": {
"styles": "css",
"images": "images",
"scripts": "js"
} watchDefine which folders to watch for changes, for the Type: object "watch": {
"source": "assets",
"target": "static"
} This field works together with the path field. With a default If you customized If you additionally want the "watch": {
"source": "resources",
"target": "static"
} then it will watch Finally, the changes will be written to the well-known hugo static folder. With a default buildDefines the folders referenced during the Type: object "build": {
"source": "public",
"target": "public"
} This should generally be left unchanged.
autoprefixerOptions for Task: Type: object "autoprefixer": {
"browsers": ["last 2 versions"]
} cleancssOptions for Task: Default: "cleancss": {
"advanced": false
} htmlminOptions for Task: Default: "htmlmin": {
"collapsedWhitespace": true
} gifsicleOptions for Task: Default: "gifsicle": {
"interlaced": true
} jpegtranOptions for Task: Default: "jpegtran": {
"progressive": true
} optipngOptions for Task: Default: "optipng": {
"optimizationLevel": 5
} svgoOptions for Task: Default: "svgo": {
"plugins": [{ "removeViewBox": true }, { "cleanupIDs": false }]
} How to updateWhenever a new $ npm install -g hugulp PRPull Requests are welcome |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论