gulp基础

一、什么是gulp?

  (一)gulp是前端项目的自动化构建工具

二、gulp的作用

  (一)常用的gulp插件

    1、压缩JS

    2、合并文件

    3、重命名文件

    4、编译sass

    5、压缩css

    6、压缩图片

三、gulp依赖的运行环境: node.js

四、安装node.js并测试是否安装成功

五、全局安装gulp:npm install -g gulp@3

注:以下操作都必须在项目的根目录下进行操作:

六、初始化package.json文件:npm init [-y]

七、创建gulpfile.js

  (一)局部安装

    1、安装所需插件:npm install --save-dev 插件名

    2、如:

        gulp

        gulp-uglify

        gulp-rename

        gulp-concat

    3、在gulpfile.js中配置

      a、通过require导入所需插件

        //导入所需插件 

       const gulp = require('gulp'),

        uglify = require('gulp-uglify'),

        rename = require('gulp-rename'),

        concat = require('gulp-concat');

      b、发布任务

        //发布任务

       gulp.task('test',function(){

        console.log('测试任务');

       })

       gulp.task('js',function(){

        gulp.src('./src/ES5JS/*.js')

        .pipe(uglify())

        //.pipe(rename({"suffix" : ".min"}))

        .pipe(concat('main.min.js'))

        .pipe(gulp.dest('./dist'));

       })

        //发布自动监听任务

       gulp.task('default',function(){

        gulp.watch(['./src/ES5JS/*.js'],['js']);

       })

八、 gulpAPI

  1. gulp.task('任务名',function(){ 任务内容 }) : 用于发布任务

  2. gulp.src('处理文件的URL') : 用于指定需要处理的文件路径

  3. gulp.dest('出口路径') : 用于指定处理后文件所放路径

  4. gulp.watch(['监听路径'],['任务名']) : 用于监听任务

  注:pipe() : 用于连接下一步操作

原文地址:https://www.cnblogs.com/liufuyuan/p/10550281.html