Nodejs-gulp

gulp

Gulp is based on the automatic task of Nodejs runner can automatically complete the javascript/coffee/sass/less/HTML/image/CSS files, such as testing, inspection, consolidation, compression, format, the browser automatically refresh, deployment files are generated, And listen for the file to repeat the specified steps after changes

Use process:

Install nodejs -> globally install gulp -> project install gulp and gulp plugin -> configure gulpfile.js -> Run task

1. Install nodejs

Node -v NPM -v NPM install -g (–save-dev) -g Global install –save local install and save to package.json configuration -dev Json in the devDependencies configuration item, which refers to the module that the production environment depends on

NPM install -g CNPM –registry=registry.npm.taobao.org you can use CNPM instead of NPM to install resources

2. Install gulp globally

NPM install gulp@3 -g or CNPM install gulp@3 -g

Test: GULp-V

3. Generate package.json file in project directory:

NPM init or CNPM init

4. Install gulp locally in the project directory:

NPM install gulp –save-dev After the local installation is successful, the node_modules folder is generated

5. Install the gulp plug-in locally in the project directorywww.npmjs.com

Gulp-minify-css NPM install gulp-minify-css –save-dev

Gulp-uglify NPM install –save-dev gulp-uglify

Gulp-htmlmin NPM install –save-dev gulp-htmlmin

Gulp-babel NPM install –save-dev gulp-babel@babel/core-babel /preset-env

File merging

npm install –save-dev gulp-concat

Modify the JS task in gulpfile.js

var concat = require("gulp-concat");
gulp.task("js".function(){
    gulp.src("src/js/**/*.js")
 .pipe(babel({
   presets: ['@babel/env']
 }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
});
Copy the code

Server: gulp-connect

npm install –save-dev gulp-connect

var connect = require('gulp-connect');
gulp.task('server'.function() {
    connect.server({
        livereload: true.port: 2333
    });
});
Copy the code

Processing images

gulp.task("img".function(){
    gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
})
gulp.task("default"["sass"."html"."minijs"."connect"."watch"."img"]);
Copy the code

Turn sass CSS gulp – sass

npm install –save-dev gulp-sass

var sass = require('gulp-sass');
gulp.task('sass'.function(){
    gulp.src('src/css/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))});Copy the code

Watch: Monitors the changes of files and performs corresponding tasks

Add pipe(connect.reload()) to each task

gulp.task('watch'.function(){
    gulp.watch('./src/css/*.scss'['sass']);
    gulp.watch('./src/*.html'['html']);
    gulp.watch('./src/css/*.css'['css']);
    gulp.watch('./src/js/*.js'['js']);
})
gulp.task("default"["sass"."html"."js"."connect"."watch"]);
Copy the code

gulpfile.js

const gulp = require('gulp');
const minifyCss = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const htmlmin = require('gulp-htmlmin');

gulp.task('default'.function() {
    // Put your default task code here
    console.log('Gulp started successfully');
});

gulp.task("hello".function(){
    console.log("hello gulp");
});

gulp.task("html".function(){
    gulp.src("src/index.html")
      .pipe(htmlmin({
        removeComments: true.// Clear HTML comments
        collapseWhitespace: true.HTML / / compression
        collapseBooleanAttributes: true.// omit the value of the Boolean attribute input tag checked="true"
        removeEmptyAttributes: true.// Remove all Spaces as input tags
        removeScriptTypeAttributes: true.// Remove script tag type="textjavascript"
        removeStyleLinkTypeAttributes: true.// Delete the style tag and link tag type="text/ CSS"
        minifyJS: true.// Compress the page JS
        minifyCSS: true// Compress the page CSS
      })
    )
    .pipe(gulp.dest("dist"))}); gulp.task("css".function(){
  gulp.src("src/css/*.css")
      .pipe(minifyCss())
      .pipe(gulp.dest("dist/css"));
});

gulp.task("js".function(){
  gulp.src("src/js/*.js")
  .pipe(uglify())
  .pipe(gulp.dest("dist/js"));
});
Copy the code