Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Proficient in common gulp plug-ins

2025-04-06 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Network Security >

Share

Shulou(Shulou.com)06/01 Report--

Match characters *, *,! , {} gulp.src ('. / js/*.js') / / * matches all files in .js format under the js folder gulp.src ('. / js/**/*.js') / / * * matches 0 or more subfolders of the js folder gulp.src (['. / jsstop. Match all js files except index.js gulp.src ('. / js/**/ {omui,common} .js') / {} match file names in {} operation del (alternative gulp-clean) var del = require ('del'); del ('. / dist'); / / delete the entire dist folder gulp-rename

Description: rename the file.

Var rename = require ("gulp-rename"); gulp.src ('. / hello.txt') .pipe (rename ('gb/goodbye.md')) / / modify the file name and path directly. Pipe (gulp.dest ('. / dist')) Gulp.src ('. / hello.txt') .pipe (rename ({dirname: "text", / / path name basename: "goodbye", / / main file name prefix: "pre-", / / prefix pipe: "- min" / / suffix extname: ".html" / / extension}) .pipe (gulp.dest ('. / dist')) Gulp-concat

Description: merge files.

Var concat = require ('gulp-concat'); gulp.src ('. / js/*.js') .pipe (concat ('all.js')) / / merge all.js file .pipe (gulp.dest ('. / dist')) Gulp.src (['. / js/demo1.js','./js/demo2.js','./js/demo2.js']) .pipe (concat ('all.js')) / / merge files in the order in []. Pipe (gulp.dest ('. / dist')); gulp-filter

Description: filter files in a virtual file stream.

Var filter = require ('gulp-filter'); const f = filter ([' * *','! * / index.js']); gulp.src ('js/**/*.js') .pipe (f) / / filter out the file index.js. Pipe (gulp.dest (' dist')); const F1 = filter (['* *','! * / index.js'], {restore: true}) Gulp.src ('js/**/*.js') .pipe (F1) / / filter out the file index.js. Pipe (uglify ()) / / compress other files. Pipe (f1.restore) / / return to all files that are not filtered. Pipe (gulp.dest (' dist')) / / operate on all files again, including index.js compression gulp-uglify

Description: compress the js file size.

Var uglify = require ("gulp-uglify") Gulp.src ('. / hello.js') .pipe (uglify ()) / / directly compress hello.js .pipe (gulp.dest ('. / dist')) gulp.src ('. / hello.js') .pipe (uglify ({mangle: pipe, / / whether to modify the variable name or not) Default is true compress: true, / / whether it is fully compressed, and default is true preserveComments: 'all' / / keep all comments})) .pipe (gulp.dest ('. / dist')) gulp-csso

Description: compression optimized css.

Var csso = require ('gulp-csso'); gulp.src ('. / css/*.css') .pipe (csso ()) .pipe (gulp.dest ('. / dist/css')) gulp-html-minify

Description: compress HTML.

Var htmlminify = require ('gulp-html-minify'); gulp.src (' index.html') .pipe (htmlminify ()) .pipe (gulp.dest ('. / dist')) gulp-p_w_picpathmin

Description: compress the picture.

Var p_w_picpathmin = require ('gulp-p_w_picpathmin'); gulp.src ('. / img/*. {jpg,png,gif,ico}') .pipe (p_w_picpathmin ()) .pipe (gulp.dest ('/ dist/img')) gulp-zip

Description: ZIP compressed file.

Var zip = require ('gulp-zip'); gulp.src ('. / src/*'). Pipe (zip ('all.zip')) / / compressed into an all.zip file. Pipe (gulp.dest (' / dist')) JS/CSS is automatically injected into gulp-autoprefixer

Description: automatically add browser prefixes to css.

Var autoprefixer = require ('gulp-autoprefixer') Gulp.src ('. / css/*.css') .pipe (autoprefixer ()) / / add the prefix directly .pipe (gulp.dest ('dist')) gulp.src ('. / css/*.css') .pipe (autoprefixer ({browsers: ['last 2 versions'], / / browser version cascade:true / / landscaping attribute) Default true add: true / / whether to add a prefix, default true remove: true / / remove obsolete prefix, default true flexbox: true / / add prefix to flexbox attribute, default true}) .pipe (gulp.dest ('. / dist'))

See more configurations: options

More browser versions: browsers

Gulp-useref

Description: parses building blocks in HTML files instead of referencing unoptimized scripts and stylesheets.

/ / index.html// gulpfile.jsvar useref = require ('gulp-useref'); gulp.src (' index.html') .pipe (useref ()) .pipe (gulp.dest ('. / dist'))

After replacement, the index.html will become:

/ / the previous two have been replaced with one gulp-rev.

Description: add a hash value to the static resource file name: unicorn.css = > unicorn-d41d8cd98f.css

Var rev = require ('gulp-rev'); gulp.src ('. / css/*.css') .pipe (rev ()) .pipe (gulp.dest ('. / dist/css')) gulp-rev-replace

Description: overrides the file name renamed by gulp-rev.

Var rev = require ('gulp-rev'); var revReplace = require (' gulp-rev-replace'); var useref = require ('gulp-useref') Gulp.src ('index.html') .pipe (useref ()) / / replace css referenced in HTML and js .pipe (rev ()) / / give css,js Html plus the hash version number. Pipe (revReplace ()) / / replace the referenced css and js with the name with the version number. Pipe (gulp.dest ('. / dist')) gulp-html-replace

Description: replace the building blocks in html.

/ / index.html / / css is buildName, you can define / / gulpfile.jsvar htmlreplace = require ('gulp-html-replace'); gulp.src (' index.html') .pipe (htmlreplace ({'css':'all.css' / / css is buildName} defined in index.html)) .pipe (gulp.dest ('. / dist'))

After replacement, the index.html will become:

/ / the previous two have been replaced with a flow control gulp-if

Description: run a task conditionally.

Var gulpif = require ('gulp-if'); var uglify = require (' gulp-uglify'); var concat = require ('gulp-concat'); var condition = true; gulp.src ('. / js/*.js') .pipe (gulpif (condition, uglify (), concat ('all.js')) / / condition is true execute uglify (), else executes concat (' all.js') .pipe (gulp.dest ('. / dist/')); tool gulp-load-plugins

Description: load gulp plug-ins from package dependencies and attachments into an object for you to choose from.

/ / package.json "devDependencies": {"gulp": "^ 3.9.1", "gulp-concat": "^ 2.6.1", "gulp-rename": "^ 1.2.2", "gulp-uglify": "^ 2.0.1"} / / gulpfile.jsvar $= require ('gulp-load-plugins') () / / $is an object that loads the plug-in gulp.src ('. / * * / * js') .pipe ($.concat ('all.js')) / / using the plug-in you can use $.PluginsName () .pipe ($.uglify ()) .pipe ($.rename (' all.min.js')) .pipe (gulp.dest ('. / dist')) gulp-sass

Description: compile sass.

Var sass = require ('gulp-sass'); gulp.src ('. / sass/**/*.scss') .pipe (sass ({outputStyle: 'compressed' / / configure output mode, default is nested})) .pipe (gulp.dest ('. / dist/css')); gulp.watch ('. / sass/**/*.scss', ['sass']) / / listen for changes in sass files in real time and execute sass task gulp-babel

Description: compiles ES6 code into ES5.

Var babel = require ('gulp-babel'); gulp.src ('. / js/index.js') .pipe (babel ({presets: ['es2015']})) .pipe (gulp.dest ('. / dist'))

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Network Security

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report