gulp自动化构建工具

问：gulp是什么，他能做什么，怎么做？

答：gulp是一个自动化构建工具，它可以做一些自动化的任务：(https://www.gulpjs.com.cn/)

    

• sass的编译（gulp-sass）
• 自动添加css前缀（gulp-autoprefixer）
• 压缩css（gulp-minify-css）
• 压缩html（gulp-minify-html）
• js代码校验（gulp-jshint）
• 合并js文件（gulp-concat）
• 压缩js代码（gulp-uglify）
• 压缩图片（gulp-imagemin）
• 自动刷新页面（gulp-livereload）
• 图片缓存，只有图片替换了才压缩（gulp-cache）
• 更改提醒（gulp-notify）

一、gulp如何使用呢

      1、  全局安装 -------全局安装gulp目的是为了执行gulp任务；

                 npm install gulp -g 
                 也可以使用淘宝镜像（cnpm install gulp -g）

      2、新建package.json文件 ------存放在项目根目录的json文件，是基于nodejs项目的配置文件。json文件里不能写注释

                   npm init

                    

        3、本地安装gulp插件

                    cd 根目录 执行    cnpm install --save-dev                           同时根目录文件下会个node-modules文件夹

                    

                    在安装less插件   执行   cnpm install gulp-less --save-dev

            4、在根目录新建一个gulpfile.js的文件          

var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');

//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('css/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('css/index')); //将会在css下生成index.css
});

gulp.task('default',['testLess']); //定义默认任务

    gulp的五个方法                

    task 这个API用来创建任务，在命令行下可以输入 gulp a1gulp 来执行a1gulp的任务。 
    run 这个API用来运行任务
    watch这个API用来监听任务。
    src 这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss,vender.scss]，也可以是正则表达式/*/.scss。
    dest 这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。