首页 > 代码库 > gulp 学习笔记

gulp 学习笔记

2024-08-25 10:19:59   225人阅读

　　关于学习gulp，推荐大家看前端构建工具gulpjs的使用介绍及技巧，这篇文章就挺全面。

　　1、gulp的安装

　　gulp是基于nodejs开发的，所以首先确定安装了nodejs。

　　(1)全局安装gulp

npm install -g gulp

　　(2)针对项目局部安装gulp

npm install gulp

　　(3)在项目目录下安装gulp依赖包

npm install --save-dev gulp

或者在项目目录下安装package.json中配置的所有依赖

npm install
{
  "name": "gulp",
  "version": "1.0.0",
  "description": "this is a gulpjs practice",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify-html":"^1.0.6",
    "gulp-minify-css":"^1.2.4"
  },"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "heshuaishuai",
  "license": "ISC"
}

 

　　2.gulp的使用

　　(1)首先在项目的根目录下创建一个gulpfile.js文件

/**
 * Created by heshuaishuai on 2016/12/5.
 */
var gulp = require(‘gulp‘),//加载gulp模块
    uglify = require(‘gulp-uglify‘),//加载压缩js模块
    concat = require(‘gulp-concat‘),//加载合并模块
    htmlmin = require(‘gulp-minify-html‘),//加载压缩html模块
    cssmin = require(‘gulp-minify-css‘);//加载压缩css模块
//输出hello
gulp.task(‘hello‘,function () {
    console.log(‘hello‘);
});
//压缩js
gulp.task(‘minify-js‘,function () {
    gulp.src(‘js/*.js‘)
        .pipe(uglify())
        .pipe(gulp.dest(‘dest/js‘));
});
//合并js
gulp.task(‘concat-js‘,function () {
    gulp.src(‘dest/js/*.js‘)
        .pipe(concat(‘all.js‘))
        .pipe(gulp.dest(‘dest/js‘));
});
//压缩html
gulp.task(‘minify-html‘,function () {
    gulp.src(‘index.html‘)
        .pipe(htmlmin())
        .pipe(gulp.dest(‘dest/html‘));
});
//压缩css
gulp.task(‘minify-css‘,function () {
    gulp.src(‘css/*.css‘)
        .pipe(cssmin())
        .pipe(gulp.dest(‘dest/css‘));
});
gulp.task(‘default‘,[‘hello‘,‘minify-js‘,‘concat-js‘,‘minify-html‘,‘minify-css‘]);

　　require()函数用于加载依赖模块，

　　gulp.task(),创建任务函数，

　　gulp.task("default",[])为默认任务，当在命令行数据gulp命令时，default后面数组中的任务将被自动执行。

　　(2)运行gulp

gulp

　　技术分享

　　3、gulp的API

　　gulp的API主要的有gulp.task、gulp.src、gulp.dest、gulp.watch;

　　 (1)gulp.task

　　　　创建任务函数　　　

gulp.task(‘hello‘,function () {
    console.log(‘hello‘);
});

 

　　 (2)gulp.src

　　　　用于找到要处理的文件。支持“*”语法，如："main/*" , "js/*.js" ，"**"代表所有文件夹。

　　　　pipe()返回处理结构以便后面操作的衔接。　　　　

gulp.src(‘js/*.js‘)
　　.pipe(uglify());

 

　　 (3)gulp.dest

　　　　被处理文件的输出路径。　　　　

gulp.pipe(gulp.dest(‘dest/js‘));

 

　　 (4)gulp.watch

　　　　对前面参数地址中的文件进行监听，当有文件内容发生变化时，执行后面参数数组中的任务。　　　　

gulp.watch(‘less/*.less‘,[‘testless‘]);

 

　　4、gulp插件

　　  (1)压缩js

 

npm install --save-dev gulp-uglify

 

gulp.task(‘minify-js‘,function () {
    gulp.src(‘js/*.js‘)
        .pipe(uglify())
        .pipe(gulp.dest(‘dest/js‘));
});

　　 (2)合并js

 

 

npm install --save-dev gulp-concat

 

gulp.task(‘concat-js‘,function () {
    gulp.src(‘dest/js/*.js‘)
        .pipe(concat(‘all.js‘))
        .pipe(gulp.dest(‘dest/js‘));
});

　　 (3)压缩css

npm install --save-dev gulp-minify-css
gulp.task(‘minify-css‘,function () {
    gulp.src(‘css/*.css‘)
        .pipe(cssmin())
        .pipe(gulp.dest(‘dest/css‘));
});

　　就说这么多了，其他的雷同。

 

 

 

 

 

 

　　

 

gulp 学习笔记


联系
我们