2-31 gulp.使用手册

gulp.使用手册

Gulp 是基于node.js的流式自动化构建工具
gulp中文网 https://www.gulpjs.com.cn/

1.Gulp的作用：

• 压缩文件，性能优化。

2.查看环境配置

• 因为Gulp是基于nodejs，理所当然需要安装nodejs

• 打开终端输入node -v查看node是否安装成功

• 先安装cnpm，输入↓以下命令

  • npm install cnpm -g --registry=https://registry.npm.taobao.org

• 输入cnpm -v查看cnpm是否配置成功，npm是node的包管理工具.cnpm是淘宝镜像

3.项目构建

• [project] //项目文件夹

  • [node_modules]

  • [src] //开发环境代码

    • [css]
    • [js]
    • [html]
    • [images]

  • [dist] //生产环境代码

    • [css]
    • [js]
    • [html]
    • [images]

  • package.json //记录该项目安装的所有插件【接口】，是初始化后自动生成的。

4.安装Gulp

• 在根目下初始化项目 cnpm init / 【缩写】cnpm i

• 先在全局环境下安装Gulp 【目的】可以使用gulp命令

  • cnpm install gulp -g

• 每次在新项目根目录下安装 gilp 【安装后出现 node_modules 文件夹，既node模块】

  • cnpm install --save-dev gulp 【缩写】cnpm -i -S gulp

• 在项目根目录下创建一个 gulpfile.js 文件 【作用】执行gulp操作

  • 可以右键新建一个 gulpfile.js 文件，并在文件内输入代码：const gulp=require('gulp');

   cope con  gulpfile.js            【创建一个gulpfile.js】
   const gulp=require('gulp');      【引入创建的文件】

5.Gulp的常用命令

- gulp.task()			【执行任务】
- gulp.src()			【引入文件目录】
- gulp.dest()  			【输出文件目录设置】
- pipe()				【管道】

6.复制开发环境src目录下的index.html文件到生产环境dist目录下

gulp.task('addhtml',function(){
    gulp.src('src/html/index.html').pipe(gulp.dest('dist/html/'))
});
//注  *表示所有的  ！表示非，不选择

7.文件改名

cnpm install --save-dev gulp-rename			//安装rename插件

const watch=requrie('gulp-watch')			//引入改名模块
gulp.task('rename',functiong(){
	return gulp.src('./src/html/index.js')
		.pipe(rename('index.min.js'))
		.pipe(gulp.dest('./dist/html'))
})
//演示的是将src目录下的index.html文件放到dist目录下，并改名为min的文件

项目配置

1.安装gulp和rename模块

const gulp = require('gulp');       		//cnpm install --save-dev gulp
const rename = require('gulp-rename');		//cnpm install --save-dev gulp-rename

2.压缩html文件

cnpm install --save-dev gulp-htmlmin

gulp.task('htmlmin', function() {
    return gulp.src('./src/html/*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist/html'));
});

3.压缩css文件

cnpm install --save-dev gulp-cssmin

gulp.task('cssmin', function() {
    return gulp.src('./src/css/*.css')
        .pipe(cssmin())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('./dist/css'));
});

4.压缩js文件

cnpm install --save-dev gulp-uglify

gulp.task('jsmin', function() {
    return gulp.src(['./src/js/*.js', '!./src/js/*.min.js'])
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('./dist/js'));
});

5.压缩图片

cnpm install --save-dev gulp-imagemin

gulp.task('imagemin', function() {
    return gulp.src('./src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'));
});

6.合并js文件

cnpm install --save-dev gulp-concat

gulp.task('js', function() {
    return gulp.src(['src/js/jquery.js', 'src/js/index.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

7.文件监听

cnpm install --save-dev gulp-watch

gulp.task('watch', function() {
    gulp.watch(['./src/html/*.html', './src/css/*.css', './src/js/*.js'], gulp.series('htmlmin', 'cssmin', 'js'));
});

gulp.task('watchless', function() {
    gulp.watch('./src/css/*.less', gulp.series('less'));
});