gulp--快速入门

前言

这里需要特别注意,gulp需要先全局安装,然后根据项目,在本地安装

名称	作用
npm install -g gulp	全局安装gulp
npm install gulp --save-dev	本地安装gulp

步骤

在安装完gulp后,在项目中新建gulpfile.js

内容如图所示:
然后我们运行下:

发现报错啊,这就是我没有全局安装的结果啊,我全局安装完后,在运行就可以了

说明gulp可以正式运行了.

一整套压缩js/css/image等流程示范

假设你刚重装完系统
接下来,你需要

1.下载nodejs,然后安装
2.打开cmd,输入 gulp -v ,查看gulp版本;然后告诉你,gulp不是内部命令,也就是还没有安装
3.全局安装gulp
$ npm install gulp -g // 注意,前面的$符号是Linux系统下的,不用写,Windows的是#号
在这里,我竟然报错了:npm ERR! Unexpected end of JSON input while parsing near ‘…},“0.10.31”:{“name”:"’
好吧,百度了一下,贴上解决的办法:

1. 首先输入 npm cache clean --force
2. 然后输入 npm install gulp -g
   漫长的等待安装吧…

然后我搞定了,截图如下:

然后在本地建立文件夹进行测试:

这是我的目录,测试js的
在建完目录前,需要进行本地安装gulp和其插件


这里我是没报什么错,然后配置下gulpfile.js

然后编写一些测试js

然后进行压缩啊,可以看到压缩后的代码啊,进行了混淆了

然后安装能压缩css的插件

npm install gulp-clean-css

打包之后引入到main.html中,试一下,发现确实没有问题

但是我们比较习惯于在生产环境使用jquery.min.js类似的压缩文件,这就需要我们引入重命名模块

npm install gulp-rename --save-dev

// 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify');
// 获取 cleancss 模块（用于压缩 CSS）
var cleanCSS = require('gulp-clean-css');
// 获取重命名模块
var rename = require("gulp-rename");


// 压缩 js 文件
// 在命令行使用 gulp js 启动此任务
gulp.task('js', function () {
    // 1. 找到文件
    return gulp.src('js/*.js')
        .pipe(rename({
            suffix: '.min'
        }))
        // 2. 压缩文件
        .pipe(uglify())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'));
});
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
    // 1. 找到文件
    return gulp.src('css/*.css')
        .pipe(rename({
            suffix: '.min'
        }))
        // 2. 压缩文件
        .pipe(cleanCSS())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/css'));
});

但是,我们每次写完了,总要手动的去编译压缩,那确实很麻烦,所以,我们希望能自动的编译压缩,像下面这样写

// 在命令行使用 gulp auto 启动此任务
gulp.task('autom', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js',['js']);
    gulp.watch('css/*.css', ['css']);
});

但是运行后,我发现各种报错啊

然后百度了下,发现是版本的问题,改成下面这样就行了

// 在命令行使用 gulp auto 启动此任务
gulp.task('autom', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', gulp.series("js"));
    gulp.watch('css/*.css', gulp.series("css"));
});

然后我们每次用gulp autom就能自动监视了;
但是我只想输入gulp进行监视怎么办?

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', gulp.series("autom"));

亲测有效

附上完整的gulpfile.js配置

// 获取 gulp
var gulp = require('gulp');
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify');
// 获取 cleancss 模块（用于压缩 CSS）
var cleanCSS = require('gulp-clean-css');
// 获取重命名模块
var rename = require("gulp-rename");


// 压缩 js 文件
// 在命令行使用 gulp js 启动此任务
gulp.task('js', function () {
    // 1. 找到文件
    return gulp.src('js/*.js')
        .pipe(rename({
            suffix: '.min'
        }))
        // 2. 压缩文件
        .pipe(uglify())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'));
});
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
    // 1. 找到文件
    return gulp.src('css/*.css')
        .pipe(rename({
            suffix: '.min'
        }))
        // 2. 压缩文件
        .pipe(cleanCSS())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/css'));
});

// 在命令行使用 gulp auto 启动此任务
gulp.task('autom', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', gulp.series("js"));
    gulp.watch('css/*.css', gulp.series("css"));
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', gulp.series("autom"));