前端构建工具Gulp使用

来源：互联网发布：python 日期月份加减编辑：程序博客网时间：2024/05/17 22:37

1.gulp安装

首先确保已经安装了nodejs开发环境，选择对应的版本进行下载http://nodejs.cn/download/

以全局方式安装gulp,执行命令

npm install -g gulp

把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install --save-dev gulp

(附:--save-dev是为了把安装gulp写进package.json，这个是为了方便下面使用例子中必须用到的)

2.gulp的使用

新建一个项目文件夹WebApp

打开命令行窗口，cd WebApp进入该文件夹

执行命令

npm install --save-dev gulp-clean gulp-concat gulp-connect gulp-less gulp-sass gulp-load-plugins gulp-cssmin gulp-imagemin gulp-uglify open gulp-rev gulp-rev-collector

（这些都是gulp常用的插件）

在项目的当前位置新建一个gulpfile.js文件以及一个src文件夹，该文件夹为开发项目的总文件夹

在gulpfile.js文件夹下编辑该代码

var gulp = require('gulp');var $ = require('gulp-load-plugins')();var open = require('open');var app = {scrPath:'src/',devPath:'build/',prdPath:'dist/'};gulp.task('html',function(){gulp.src(app.scrPath + '**/*.html').pipe(gulp.dest(app.devPath)).pipe(gulp.dest(app.prdPath)).pipe($.connect.reload());});gulp.task('js',function(){gulp.src(app.scrPath + 'script/**/*.js').pipe($.concat('index.js')).pipe(gulp.dest(app.devPath +'js')).pipe($.uglify()).pipe(gulp.dest(app.prdPath +'js')).pipe($.connect.reload());});gulp.task('json',function(){gulp.src(app.scrPath + 'data/**/*.json').pipe(gulp.dest(app.devPath + "data")).pipe(gulp.dest(app.prdPath + "data")).pipe($.connect.reload());});gulp.task('less',function(){gulp.src(app.scrPath + 'style/index.less').pipe($.less()).pipe(gulp.dest(app.devPath +'css')).pipe($.cssmin()).pipe(gulp.dest(app.prdPath +'css')).pipe($.connect.reload());});gulp.task('sass',function(){gulp.src(app.scrPath + 'style/css.scss').pipe($.sass()).pipe(gulp.dest(app.devPath +'css')).pipe($.cssmin()).pipe(gulp.dest(app.prdPath +'css')).pipe($.connect.reload());});gulp.task('image',function(){gulp.src(app.scrPath + 'image/**/*').pipe(gulp.dest(app.devPath +'image')).pipe($.imagemin()).pipe(gulp.dest(app.prdPath +'image')).pipe($.connect.reload());});gulp.task('clean',function(){gulp.src([app.devPath,app.prdPath]).pipe($.clean());});gulp.task('build',['image','js','html','less','json']);gulp.task('default',['build'],function(){gulp.watch(app.scrPath + '**/*.html',['html']);gulp.watch(app.scrPath + 'script/**/*.js',['js']);gulp.watch(app.scrPath + 'data/**/*.json',['json']);gulp.watch(app.scrPath + 'style/**/*.less',['less']);gulp.watch(app.scrPath + 'image/**/*',['image']);});

接下来大概解释下代码的作用

引入gulp插件的作用

var gulp = require('gulp');var $ = require('gulp-load-plugins')();var open = require('open');

定义变量，第一个为开发环境下的代码，第二个为编译情况下，第三个为生产环境即正式发布

var app = {scrPath:'src/',devPath:'build/',prdPath:'dist/'};

在src文件夹下新建index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>主页</title></head><body>这是主页来的</body></html>

执行gulp html

（发现项目文件下生成build、dist两个文件夹，同时里面也有index.html）这是由下面这段代码执行的

gulp.task('html',function(){gulp.src(app.scrPath + '**/*.html')//被编译的文件.pipe(gulp.dest(app.devPath))//编译后的文件.pipe(gulp.dest(app.prdPath))//生成环境的文件.pipe($.connect.reload());//负责代码修改后实时刷新});

同理，下面接下是针对js，less，sass，image等文件的编译，多出几个编译sass或者压缩的方法，即可执行gulp js 或者gulp sass 编译对应的文件

执行gulp clean

你会发现生成的build、dist两个文件夹会被删除

执行gulp build

将会批量执行，即编译所有数组里的文件

执行gulp default

将会实时刷新界面，更新代码

阅读全文

1 0