Preliminary exploration of gulp+demo test examples (continuously updated)

-Foreword

There must be many people here who think that gulp has official documents and Chinese documents. Why should I read your article? What I want to say is that I am not writing an article to compare with the gulp document, I am just right Summarize and digest what you have learned, keep yourself stocked, and some people may not understand the official gulp documentation, I am here to make it easier to understand in the vernacular. For those of you who have the same problem as me, some solutions to the problem, please detour, don't waste everyone's time.

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— ——-

Theme:

The task given by the boss recently is to make a PC-side webpage for a company. When I first heard the PC-side, I immediately panicked to guess whether it should be compatible or not . The kind boss said that as long as it is compatible with IE8, he was relieved; There must be a lot of repetitive content on PC-side web pages, such as header, banner, footer, etc. How to reuse these components?

copy and paste

Advantages: simple, mindless operation, assignment and pasting;

Disadvantages: Once you make a mistake somewhere, you have to copy and paste from scratch, and the whole process is terrifying.
iframe

Advantages: convenient, fast, directly import html;

Disadvantages: insecure, easy to be hijacked; can't operate the Dom in it, and it is not easy to SEO, depending on the situation, use iframe.
View

Advantages: componentized, data-driven, easy to manage, and clear in structure;

Disadvantages: Not applicable to PC, SPA single-page application for mobile.
$_ajax

Advantages: convenient and easy to operate;

Disadvantages: requires requests, cross-domain.
Packaging tool - gulp (focus - just learned today)

Because it is what I learned today, I can only see the advantages at present: easy to package, many plug-ins, many functions, and easy to operate;

———————————————————————The dividing line again ————————————————————————-

gulp

1. Install gulp globally:

$ npm install --global gulp

2. Install as the project's development dependencies (devDependencies): (Here I have additionally installed 2 less replacement tools and content splicing tools)

$ npm install gulp --save-dev 
$ npm install gulp-less --save-dev 
$ npm install gulp-file-include --save-dev

3. Create a file named gulpfile.js in the project root directory:

// 导入模块   var后面的为你定义的模块的名称（啥都行，只要自己知道，最好符合规范取名）

var gulp = require('gulp')
var less = require('gulp-less')
var fileinclude = require('gulp-file-include')

// 在这里创建一个task任务 task('任务名称',要执行的操作)

gulp.task('less', function (cb) {

  // .src 任务的目标文件位置
  gulp.src('./demo.less')
  .pipe(less())

  // dest 将新的文件重新输出并且写入到某个文件夹中  文件被写入的路径是以当前设置的相对路径
  .pipe(gulp.dest('./css'))

  // 注意：可以写入多个文件， 如果没有这个文件夹，将会自动创建一个新的文件夹
  // .pipe(gulp.dest('./dist'))
});

gulp.task('fileinclude',['less'],function () {
  gulp.src(['page/*.html','!page/include/*.html'])
    .pipe(fileinclude({
    //  前缀
      prefix: '@@',
   //  路径
      basepath: '@file'
    }))
    .pipe(gulp.dest('./dist'))
})

4. Finally run the command in the terminal:

$ gulp less //gulp + 任务名

After running these codes, you can see the new file in the ./css path

Then give my folder directory:

write picture description here

Explain the folder directory (not to mention the common ones):
dist (distribution): the newly generated .html file after gulp is packaged is placed here;
node_modules: the module package required for gulp to run;
page/include: placed here is the public part of .html (for splicing);
page/demo2.html: The one above is public, so this file is definitely not public, it is used to splicing to generate different .html;

Not intuitive, let out code:

<body>
  @@include('./include/header.html')
  <!-- 不同的内容 -->
  @@include('./include/footer.html')
</body>

Don't stop and continue:

demo.less: less file;
gulpfile.js: gulp toolkit configuration file;
package.json: node, module version configuration file

About the .src .task .dest of the gulp API, I have enough vernacular descriptions, so I hope everyone (patient big guy) points out the wrong place.

We will continue to update other content of gulp in the future. . . . . . . .