Recently, I have a lot of leisure time , So I want to build a website to practice my hand , First, choose the domain name in godday I've chosen one of them, Bought a 1 Yuan's Alibaba cloud server , Next, the program .

use vue+nodejs To develop

One 、NodeJs Environment installation and configuration

About what is NodeJs I'm not going to go into details , Brief description , It just uses javascript Way to operating system information in a development environment . It's a bridge platform .

You can go to the official website to download the latest version of , Configure environment variables after installation .

download 》  NodeJs  Choose the green one on the left to download and install

About the configuration of environment variables , Baidu searches a lot , Click here to see

Two 、gulp Installation and use

First ,gulp Is based on nodejs Platform , One of the front-end development tools for packaging and publishing static resources . Of course, there are webpack And so on, some packaging tools .

Because it's based on nodejs therefore , We use it npm To carry out Yes gulp Installation .(npm It's the package manager , Now the installation is generally finished nodejs I'll take it with me ).

npm Generally, the package is downloaded from abroad , So if you want to download it quickly , You can switch between images . How to switch , Click here 《npm Image switch 》

And of course, direct use ,cnpm( This is a mirror image created by Taobao for China ), Can pass npm To install cnpm That's all right. .

nodejs What's essential to development is package.json( It's used to manage , adopt npm or cnpm Some configuration of the downloaded package and the published package ).

therefore , We're going to build a package.json package , And indicate some configurations , About its each item configuration explanation, everybody may look for the material by oneself , A great deal of .

Now let's take a look at the brief package.json as follows :

"name": "typing-src",
"realname": "typing-ui",
"version": "2.0.1",
"scripts": {
"build": "gulp",
"watch": "gulp watch"
"author": [
"admin <>"
"homepage": "",
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0 ",
"gulp-header": "^1.8.8",
"gulp-if": "^2.0.1",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^1.5.4",
"gulp-zip": "^4.0.0"
"dependencies": {
"gulp-html-replace": "^1.6.2",
"gulp-minify-html": "^1.0.6",
"gulp-processhtml": "^1.2.0",
"gulp-util": "^3.0.8"
When it's done , We go through cmd Assign to package.json This directory , In the command line tool execution cnpm install You can install the related Elaine package .

Then this is what we will write later gulpfile.js File preparation , among scripts This option is the command we need to execute later .

Why do we have to gulpfile.js file name , because gulp The command automatically reads the default file .

Next, create a gulpfile.js file , The contents are as follows :

var pkg = require('./package.json');
// To obtain parameters
var argv = require('minimist')(process.argv.slice(2), {
default: {
ver: 'all'
,resourcesPatch = ' The directory you want to package and read '
,outPath = resourcesPatch+'dist/'
,outStaticPath = outPath+' Catalog 1/'
,outTplPath = outPath+'templates/'
,staticPath = resourcesPatch+' Catalog 1/'
// Release catalog
,releaseDir = './' + pkg.version
,release = releaseDir

// Target wood
,destDir = function(ver){
return ver ? release : function(){
return argv.rc ? 'rc' : 'dist'

var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var minifyhtml = require('gulp-minify-html');
var htmlreplace = require('gulp-html-replace');
//var processhtml = require('gulp-processhtml');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var header = require('gulp-header');
var del = require('del');
var gulpif = require('gulp-if');
var minimist = require('minimist');
var zip = require('gulp-zip');

// notes
var note = [
'/** <%= pkg.realname %>-v<%= pkg.version %> <%= pkg.license %> License By <%= pkg.homepage %> */\n <%= js %>'
,{pkg: pkg, js: ';'}
* Read the catalog file and create the packaging task , Read recursively
var creatTasks = function (ops) {
var doDir=ops.doDir,type=ops.type;
var files = fs.readdirSync(doDir),tasks=[],item,dir;
for(var i=files.length-1;i>=0;i--){
if(fs.statSync(path.join(doDir, files[i])).isDirectory()){
compatibility: 'ie7'
//.pipe(header.apply(null, note))// This will affect @charset "utf-8"; The pattern of
return tasks;

var taskList = {
web_js:function(ver) {
let uirPath = staticPath +'/web/js/';
let dir = destDir(ver);
let outDir = outStaticPath +'/'+ dir+'/web/js/';
let tasks = creatTasks({
return merge(tasks);
,web_css:function(ver) {
let uirPath = staticPath +'/web/css/';
let dir = destDir(ver);
let outDir = outStaticPath + dir+'/web/css/';
let tasks = creatTasks({
return merge(tasks);
,common_js_modules:function(ver) {
let uirPath = staticPath +'/common/js/modules/';
let dir = destDir(ver);
let outDir = outStaticPath +dir+'/common/js/modules/';
let tasks = creatTasks({
return merge(tasks);
// Some resources are not packaged , But to copy to the corresponding directory
let uirPath = staticPath +'/common/js/lib/**/*';
let dir = destDir(ver);
let outDir = outStaticPath+ dir+'/common/js/lib/';
return gulp.src(uirPath).pipe(gulp.dest(outDir));
// Add tasks
gulp.task('web_js', taskList.web_js);
gulp.task('web_css', taskList.web_css);
gulp.task('copy_webCssIcon', taskList.copy_webCssIcon);
gulp.task('copy_webImages', taskList.copy_webImages);

// clear
gulp.task('clear', function(cb) {
return del(['./'+ (argv.rc ? 'rc' : 'dist') +'/*'], cb);
gulp.task('clearRelease', function(cb) {
return del([outStaticPath+releaseDir,outTplPath+releaseDir], cb);
// Here is the monitoring file change package
// Distribution version gulp
gulp.task('default', ['clearRelease'], function(){
for(var key in taskList){

Finally, we can implement it npm run build That's all right. .
author : Front-end development engineer
source :CSDN
original text :
Copyright notice : This article is an original blog article , Please attach a link to the blog post !

Yes Station resources packaging , use vue Node.js More articles about

  1. Reduce packaging components vue.config.js——Webpack Of externals Use

    vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...

  2. Front end resources, multiple products, whole station, one click packaging &amp; Package version management ( One )

    My fifth month at the new company . The whole station resource packaging management has also been put on the agenda . problem : First . What is the packaging management of the whole station ? Several important products of our company are in the same webapp Inside , however , Different development departments develop different products independently , For a long time , We ...

  3. use node.js Build a static resource station html,js,css Load correctly The jump is also perfect !

    I bought a server yesterday to test some of my projects , Because it's the first time to build a station , stay tomcat,linux,node.js I thought about it for a long time . In the end because node It's more convenient to build, so I decided to use it without so much trouble node.js To build a website project . build ...

  4. newest Node.js Resource summary

    Node.js Resource summary file Node.js Official documents : Node.js Chinese document : Express ...

  5. Economic Node.js course , Tools and resources

    Here's a batch of practical Node.js course , Tools and resources . Node.js It's a building on Chrome Above JavaScript Runtime platform , It's easy to build fast , Scalable web applications .Node.js Use the event ...

  6. Learn from me from scratch Unity3D Development -- Resource packaging (AssetBundle)

    It hasn't been updated for a long time , I've been working overtime to keep up with the project schedule . Here's to apologize to the children's shoes who follow my blog ! Here's what I recorded Unity3D Video tutorial from scratch, you can pay attention to :   Depending on the ...

  7. AssetBundle series —— Game resources packaging ( One )

    Package local resources , And then put it on the resource server for the game client to download or update . The server contains the following list of resources :(1) Game content resources assetbundle(2) Resource maintenance list , Include the name of each resource ( Full pathname ) And the corresponding version number [ Resource name ...

  8. [Unity Asset]AssetBundle series —— Game resources packaging

    Reprint : Package local resources , And then put it on the resource server for the game client to download or update . The server contains the following list of resources :(1) In the game ...

  9. take SWF Files are used for resource packaging

    Use Flash The development of web games is inseparable from dealing with various art resources . For static resources, that is all kinds of pictures , For mobile resources, we can consider making them directly swf. Made into swf There are two kinds of art resources in China : One is to list key frames directly on the main time axis , that ...

Random recommendation

  1. C++_ A series of self-study courses _ The first _8_ course _ Pointers and references _《C++ Primer The Fourth Edition 》

    C The most psychedelic part of language is the pointer part , Both the definition of pointer and the meaning of pointer can be regarded as C The most complex part of language . The pointer not only provides the programmer with the interface to operate the hardware directly , It also provides programmers with more flexible usage .C++ Inherit this high efficiency ...

  2. typename

    typename Keywords are C++ Introduced in the standardization process , The purpose is to show the compiler that template An identifier in is a type . Such as :template <typename T> class MyClas ...

  3. android The progress bar component of ProgressBar

    First of all main.xml file The code is as follows : <LinearLayout xmlns:android=" ...

  4. linux mount ( Mount command ) Detailed explanation

    Hook command (mount) First , Let's talk about the hook up (mount) How to use commands ,mount There are so many command parameters , Here's what we're going to use today . Command format :mount [-t vfstype] [-o option ...

  5. UNIX Time stamp and date conversion and calculation

    UNIX Timestamps are a compact way to save dates and times , It's most UNIX A method of saving the current date and time in the system , It is also a standard format for date and time in most computer languages . With 32 Bit integers represent Greenwich mean time , for example , send ...

  6. Maven and Gradle

    Maven and Gradle contrast Java There are three main building tools in the world :Ant.Maven and Gradle. After several years of development ,Ant Almost disappeared .Maven It's also on the wane , and Gradle Development is like the sun . I have the honor to witness ...

  7. Kotlin Introduction to technology and Java contrast .md

    One .Kotlin Basic environment construction Android studio The version of is greater than 3.0 Direct support for Kotlin grammar , Create it directly ; Android studio Version of is less than 3.0, Steps are as follows : Need to download plug-ins Plug in search ...

  8. dbus-glib and GDBus The difference between Conceptual differences( Conceptually ...

  9. nginx ssl Communication optimization ideas

    TLS There are two main things to do in the process of communication : 1. Exchange key 2. Encrypt data If it's optimized , The optimization is mainly considered from these two points : 1.nginx open session cache If you don't need to negotiate the key again in one day . 2. Small files are more ...

  10. TCP/IP Agreement three handshakes and four waves

    One . Flag bit and serial number seq Serial number : Randomly generated by the sender ack Confirm the serial number :ack=seq+1 Sign a ACK=1 Confirm that the serial number is valid SYN Sign a : Initiate a new connection ACK Sign a : Confirm that the serial number is valid FIN Sign a : disconnect ...