gulp构建工具入门及使用

1.创建一个空的文件夹，安装依赖包

npm i gulp --save-dev

2.npm init

用来生成package.json文件

3.安装可能使用到的模块：

npm install gulp-imagemin --save-dev     // 图片压缩模块

npm install gulp-uglify --save-dev js        // 压缩模块

npm install gulp-sass --save-dev sass    // 转换为css模块

npm install gulp-concat --save-dev        // 代码合并模块

4.在根目录下创建gulpfile.js文件，在这个文件中处理任务

• gulp.task -- 定义任务
• gulp.src -- 找到需要执行任务的文件
• gulp.dest -- 执行任务的文件的去处
• gulp.watch -- 观察文件是否发生变化

5.gulp指令

在gulpfile.js文件中先定义需要的变量

var gulp = require('gulp');
var imageMin = require('gulp-imagemin');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var concat = require('gulp-concat');

gulp --  当名字为default即为默认输出

gulp.task('default', function() {
    // 将你的默认的任务代码放在这
    return console.log('这是默认任务，只需要执行gulp指令');
});

task的第一个参数为可供选择的名字，可以随意设置

gulp message      gulp copyFiles  ...

gulp.task('message', function() {
    // 将你的任务代码放在这
    return console.log('这是信息，只需要执行gulp.message指令(gulp.名字)');
});

// 拷贝文件
gulp.task('copyFiles', function() {
    // * 表示其src下的所有.html文件
    gulp.src('src/*.html')
        .pipe(gulp.dest('copySrc'));
});

// 图片压缩
gulp.task('images', function () {
    // imageMin 是个方法，（）
    gulp.src('src/images/*')
        .pipe(imageMin())
        .pipe(gulp.dest('copySrc/images'));
});

// 压缩js
gulp.task('minify', function () {
    gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('copySrc/js'));
});

// sass转换为css
gulp.task('sass', function () {
    gulp.src('src/sass/*')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('copySrc/css'));
});

//多个任务同时执行
gulp.task('default', ['message', 'copyFiles', 'images', 'minify', 'sass']);

//代码合并
gulp.task('scripts', function () {
    gulp.src('src/js/*')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('copySrc/js/'));
});

// 监听代码
gulp.task('watch', function () {
   gulp.watch('src/js/*', ['scripts']);
   gulp.watch('src/images/*', ['images']);
   gulp.watch('src/html/*', ['copyFiles']);
   gulp.watch('src/sass/*', ['sass']);
});

目录结构为：