This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

[Node.js] — Build an automated development environment

[Tool Preparation], [Start], [Detailed Steps (4)],

Building a front-end engineering environment – five

10. Use tools to process modules

We use the commonJS modularity specification in our JS development, so we don’t need to merge js files.

Modularity is used to combine JS function modules together, but we need to use tools to do it

To package js from SRC for modular development and put it in dist

In this case we used the gulp-Webpack tool, which has now been renamed

webpack-stream,

As mentioned earlier, popular automates have gulp/webpack and so on, actually this’ webpack- ‘

Stream is a small one that is used exclusively in gulp ‘

  • And the use ofbabelTools forjsTo compile the code, you need to download ‘Babel –

loader/babel-core/babel-preset-es2015`,

gulp.task('handle:js'.function () {
  // return gulp.src(' SRC /entry.js'
  // // the real processing is all here
  // .pipe(webpack({
  // Mode: 'production', // Set the packaging mode to none developmentProduction (which compresses the code)// // Single entry and single exit
  / / / / entry: 'the. / SRC/views/index/javascripts/index, js', / / entrance
  // // output: {
  // // filename: 'index.js'
  / / / /}
  // // Whoever is in front of a multi-entry single-exit array is also in front of the pack
  / / / / entry: ['. / SRC/views/index/javascripts/index, js', 'the. / SRC/views/index/javascripts/vendor. Js'], / / entrance
  // // output: {
  // // filename: 'index.js'
  / / / /}
  // // Multiple entrances and multiple exits
  // entry: {
  // index: './src/views/index/javascripts/index.js',
  // vendor: './src/views/index/javascripts/vendor.js'
  //}, // entry
  // output: {
  // filename: '[name].min.js' // What is the key name in the entry
  / /}
  / /}))
  // .pipe(gulp.dest('./dist/index/js'))

  let streams = []
  for (const page in config.jsoptions) {
    // If the entry is an array or string, it is single exit, otherwise it is multiple exit
    let entry = config.jsoptions[page]
    let filename = Array.isArray(entry) || typeof entry === 'string' ? page : '[name]'
    let stream = gulp
      .src('src/entry.js')
      .pipe(
        webpack({
          mode: 'production'.entry: entry,
          output: { filename: filename + '.min.js' },
          module: {
            rules: [
              // This is where webPack uses various loaders to compile the code
              {
                test: /\.js$/.// To process the js file
                loader: 'babel-loader'.// Use babel-Loader to process it
                query: {
                  presets: ['es2015'].// Compile es6
                },
              },
            ],
          },
        })
      )
      .pipe(gulp.dest('./dist/' + page + '/js'))
    streams.push(stream)
  }

  returnmerge(... streams) })Copy the code

11. Usegulp-injectThe tool is automatically inhtmlIn-page injectioncss/jsRely on

// Write the following code to the page

   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <! -- inject:css -->
    <! -- endinject -->
</head>
<body>
    <h1>Hello Index !!!! @</h1>
    <! -- inject:js -->
    <! -- endinject -->
</body>
</html>
Copy the code

// gulpfile:

// Add dependencies to HTML files for each page

gulp.task('inject'.function () {
  setTimeout(() = > {
    config.pages.forEach((page) = > {
      var target = gulp.src('./dist/' + page + '/' + page + '.html')
      // It's not necessary to read the files (will speed up things), 

we're only after their paths: var sources = gulp.src(['./dist/' + page + '/js/*.js', './dist/' + page + '/css/*.css'], { read: false, }) target.pipe(inject(sources, { ignorePath: '/dist' })).pipe (gulp.dest('./dist/' + page + '')) }) }, 1000) })Copy the code

Use 12.sassInstead ofcss

You are going to use sass instead of CSS in your project, so you need to use gulp-sass

Sass is compiled

  • You need to download Node-sass /gulp-sass

// Process CSS, merge CSS, compress CSS, prefix, output

  1. Hopefully you can merge them into multiplecss, more flexible
  2. Flexible handling of multiple pages
gulp.task('handle:css'.function () {
  let streams = [] // Store an array of the following file streams
  for (const page in config.cssoptions) {
    // Iterate over multiple pages
    for (const file in config.cssoptions[page]) {
      // Iterate through multiple packaging CSS file configurations for each page
      let stream = gulp
        .src(config.cssoptions[page][file])
        .pipe(sass({ outputStyle: 'compressed' })) // Compile SCSS into CSS
        .pipe(
          autoprefixer({
            // Automatic prefix
            browsers: [
              'last 2 versions'.'Safari >0'.'Explorer >0'.'Edge >0'.'Opera >0'.'Firefox >=20',].// Last 2 Versions - the latest two versions of major browsers
            cascade: false.// Whether to beautify the property value by default: true like this:
            // -webkit-transform: rotate(45deg);
            // transform: rotate(45deg);
            remove: true.// Whether to remove unnecessary prefixes. Default: true
          })
        )
        .pipe(concat(file + '.css')) // Merge files
        //.pipe(minifycss()) // Compress the file
        .pipe(rename({ suffix: '.min' })) / / renamed
        .pipe(gulp.dest('./dist/' + page + '/css')) // Output to the corresponding directory

      streams.push(stream) // Store the current file stream in an array}}returnmerge(... streams)// Merge multiple file streams
})
Copy the code

. Is the expansion operator in ES6:

var a = [1.2.3.4]
var b = [...a, 5.6.7]
/ / b:,2,3,4,5,6,7 [1]
Copy the code
var a = { x: 1.y: 2 }
var b = { z: 3. a }// b: { x: 1, y: 2, z: 3 }
Copy the code

Update the trailer below, keep up with the rhythm

I will continue to learn how to build our automated development environment with Node.js,

Save time and cost, improve development efficiency, and empower our development efficiency!

Keep up with the pace of progress, forward refueling

Come on!! go~