• Using SVG symbols to build a complete guide to icon system


    From the initial use of img pictures to the later use of CSS sprite to reduce server requests, to the popular graphic Font Icon iconcont. Now, a new way of using icons has become popular – SVG symbols. Working principle How SVG symbols work: the symbol element is used to define a graphic template object, […]

  • Small projects organized by gulp


    At present, we are developing a python markdown wiki system. There are some options for front-end modularization and packaging.1. Modularization and packaging with web packBecause the project is relatively small, after a little understanding, I don’t think it is necessary to use webback. Why do you use ox knife to kill chickens?2. Adopt requirejs modularization […]

  • Using gulp update to deploy Vue + Express project to server


    file structure The following is the file structure of my local development project and the file structure deployed on the server, so that you can find the corresponding files intuitively in the following path 1. Development document structure 2. Server file structure gulpfile.jsDetailed explanation of document content I have explained the installation and basic API […]

  • Build angular.js project with gulp + bower


    This article focuses on the detailed introduction of the construction of angular.js project. Gulp is an excellent automation project construction tool, which we will use to completejavascript/less/css/html/images/fontsTest, check, merge, compress, format, browser auto refresh, deploy file generation, and listen for the file to repeat the specified steps (hot overload) after changes. Bower is a project […]

  • With 100 lines of code, complete your own front-end construction tool!


    Es2017 +, you no longer need to struggle with the complex selection of construction tool technology. It doesn’t need gulp, grunt, yeoman, Metalsmith, fis3. The above build tools can be crossed out in your mind forever. With 100 lines of code, you’ll see the nature of the build tool. With 100 lines of code, you […]

  • Using gulp to realize the most basic JS / CSS compression and ES6 to Es5 functions


    premise Please install node and Babel first, and prepare a normal web project Global installation of gulp 3.9.0 4. X is not compatible with 3. X, it is recommended to install 3.9 directly in normal usenpm install -g [email protected] Check version gulp -v Install gulp in the project directory npm install [email protected] –save-dev Install plug-ins […]

  • Gulp compiles bootstrap sass file and JS file


    start Because there is an elixir in laravel that is very powerful, but it is not easy to understand the front-end tool details, so learn the relevant tools separately. Start by compiling and installing bootstrap V4. The following section mainly includes the compilation and packaging of bootstrap’s SCSS and js. Install bootstrap source code Execute […]

  • Angular 1 with gulp and bower


    Installation of gulp and bower Gulp installation: NPM install-g gulp Bower installation: NPM install-g bower == Note: == Some package files of angularjs are managed through bower Second bower use Initialize a project with bower: bower init Fill in the project name, description, etc. Install angular js: bower install — save angular Create. bowerrc files […]

  • What’s the difference between Webpack and Grunt and Gulp?


    With the rapid development of the front-end, the front-end projects are becoming more and more complex. Thanks to the development of Nodejs, modularization, component and engineering of the front-end are also the general trend. Over the years, Grunt, Gulp and Webpack have become popular with the development of engineering. Early stage of front-end engineeringIt is […]

  • Construction of ES6 Development Environment with gulp+gulp-better-rollup+rollup


    Construction of ES6 Development Environment with gulp+gulp-better-rollup+rollup There’s not much verbosity about Gulp. The commonly used JS module packaging tools are webpack, rollup and browserify. Gulp usually needs to use one of these three tools to merge and package ES6 module code to build an ES6 development environment. Therefore, Gulp has many schemes to build […]

  • Use of NodeJS+Express to Build Personal Blog-gulp Automation Tool (2)


    Gulp automation build tool Brief statement Now, whether it’s front-end or back-end, it’s inevitable to deal with html; and Node is so easy to develop the web; don’t we want to write something by ourselves? Express is a more avant-garde framework; a lot of front-end things have been deeply integrated for a long time; now […]