gulp构建工具学习笔记

// 1、安装 gulp 命令行工具 npm install --global gulp-cli

// 2、安装 gulp，作为开发时依赖项 npm install --save-dev gulp

// 3、在项目目录下创建 package.json 文件npm init

const gulp = require('gulp')



/* 插件安装 

    cnpm install gulp-concat gulp-uglify gulp-rename --save-dev

    cnpm install gulp-less gulp-clean-css --save-dev

    cnpm install gulp-htmlmin --save-dev

    cnpm install gulp-livereload --save-dev

    cnpm install gulp-connect --save-dev

    cnpm install gulp-open --save-dev

*/

const concat = require('gulp-concat') // 临时合并文件

const uglify = require('gulp-uglify') // 压缩js文件

const rename = require('gulp-rename') // 重命名文件



const less = require('gulp-less') // 将less预编译语言转化为css语言

const clean_css = require('gulp-clean-css') // 压缩css文件



const htmlmin = require('gulp-htmlmin') // 处理html



const livereload = require('gulp-livereload') // 自动编译



const connect = require('gulp-connect') // 热加载（实时加载）



const open = require('gulp-open') // 自动打开浏览器



/*

第一个参数：任务的名字（自定义的）

第二个参数：回调函数

// gulp.task('hello', function () {

//     console.log('hello word')

// })

*/



/* 

gulp.src() 找到源文件路径,将数据读取到gulp内存中

gulp.dest() 找到目的文件路径,若无此路径，会去自动创建

pipe() 理解程序运行管道

gulp --version 检查 gulp 版本

*/



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

    return gulp.src('src/js/**/*.js') // 找到源文件路径,将数据读取到gulp内存中

    .pipe(concat('build.js')) // 临时合并文件

    .pipe(gulp.dest('dist/js/')) // 找到目的文件路径

    .pipe(uglify()) // 压缩文件

    .pipe(rename({suffix: '.min'})) // 重命名文件

    .pipe(gulp.dest('dist/js/')) // 找到目的文件路径

    .pipe(livereload()) // 实时刷新

    .pipe(connect.reload()) // 实时刷新

})



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

    return gulp.src('src/less/**/*.less')

    .pipe(less()) // 编译less文件为css文件

    .pipe(gulp.dest('src/css/'))

    .pipe(livereload()) // 实时刷新

    .pipe(connect.reload()) // 实时刷新

})



gulp.task('css', ['less'], function () { // 

    return gulp.src('src/css/**/*.css')

    .pipe(concat('built.css'))

    .pipe(rename({suffix: '.min'}))

    .pipe(clean_css({compatibility: 'ie8'})) // 兼容到ie8

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

    .pipe(livereload()) // 实时刷新

    .pipe(connect.reload()) // 实时刷新

})



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

    return gulp.src('src/index.html')

    .pipe(htmlmin({collapseWhitespace:true}))

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

    .pipe(livereload()) // 实时刷新

    .pipe(connect.reload()) // 实时刷新

})



// 半自动的监视任务

gulp.task('watch',['default'],function () {

    livereload.listen() // 开启监听



    // 确认监听目标以及绑定相应的任务

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

    gulp.watch(['src/css/**/*.css','src/less/**/*.less'], ['css'])

    gulp.watch('src/*.html', ['html'])

})



// 全自动的监视任务

gulp.task('server',['default'],function () {

    // 配置服务器的选项

    connect.server({

        root: 'dist/', // 输出后的根目录

        livereload: true, // 实时刷新

        port: 5000

    })

    

    open('http://localhost:5000')



    // 确认监听目标以及绑定相应的任务

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

    gulp.watch(['src/css/**/*.css','src/less/**/*.less'], ['css'])

    gulp.watch('src/*.html', ['html'])



})



gulp.task('default', ['js','less','css','html'])