文章标题

最新推荐文章于 2024-04-22 16:59:44 发布

一期一会dy

最新推荐文章于 2024-04-22 16:59:44 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签： gulp

本文链接：https://blog.youkuaiyun.com/daiy1/article/details/75152024

本文介绍如何使用Gulp进行前端资源的自动化构建流程，包括安装配置、常用插件及任务编写。通过具体实例展示了文件压缩、合并、重命名、图片优化、实时刷新等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gulp基础命令（在安装好gulp后）

进入安装node.js的磁盘
创建一个文件夹，在cmd命令行里输入npm init，生成一个package.json文件
输入npm install gulp gulp-minify-css gulp-concat gulp-uglify –save-dev命令
生成node_modules文件
建一个gulpfile.js文件，写入所需要实现的压缩js，css等命令；
在根目录下建一个src文件夹，在文件里写入所需要压缩的js或css
在命令行里输入gulp+函数名
自动生成一个dist文件夹，里面是所生成的压缩文件

gulp命令

reqiure() 方法

     var gulp=require('gulp');

task 方法，添加任务

    gulp.task('copy-index',function(){
    return gulp.src('index.html').pipe(gulp.dest('dist'))  
});       /*复制HTML文件到制定位置*/

src 找到源地址

var gulp=require('gulp');
 var sass=require('gulp-sass');
 var less=require('gulp-less');
 var connect=require('gulp-connect');
 var concat=require('gulp-concat'); /*合并文件*/
 var uglify=require('gulp-uglify'); /*压缩文件*/
 var rename=require('gulp-rename'); /*重命名*/
 var minifyCss=require('gulp-minify-css'); /*压缩css*/
 var imagemin = require('gulp-imagemin');/*优化图像文件的尺寸*/
// gulp.task('hello',function()
// {
//  console.log("您好");
// });

// gulp.task('default',['hello']);

gulp.task('server',function()
{
    connect.server(
        {
            root:'dist',
            livereload:true  /*启用实时刷新的功能*/ 
        });

}) /*把文件放到浏览器上去执行，在命令行里输入gulp server，把端口好复制到浏览器*/
gulp.task('copy-index',function(){
    return gulp.src('index.html').pipe(gulp.dest('dist'))
    .pipe(connect.reload());
});


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


})

gulp.task('data',function(){
    return gulp.src(['xml/*.xml','json/*.json ','!json/secret-*.json'])
    .pipe(gulp.dest('dist/data'))
});

gulp.task('build',['copy-index','images','data'],function()
{
    console.log("编译成功！");
});   /*依赖其他任务，先同时执行所依赖的所有任务，再执行它本身所需要执行的任务*/

gulp.task('watch',function()
{
    gulp.watch('index.html',['copy-index']);   /*在执行watch的任务时，
    监视index.html的变化，一旦有变化就执行copy-index任务*/
    gulp.watch('images/**/*.{jpg,png}',['images']);
    gulp.watch(['xml/*.xml','json/*.json','!json/secret-*.json'],['data']);
})

// gulp.task('sass',function()
// {
//  return gulp.src('stylesheets/**/*.scss')
//  .pipe(sass())
//  .pipe(gulp.dest('dist/css'))
// });  /*把sass编译成css*/
gulp.task('less',function()
{
    return gulp.src('stylesheets/**/*.less')
    .pipe(less())
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css'))
});  /*把less编译成css*/

gulp.task('default',['server','watch'])

gulp.task('scripts',function()
{
    return gulp.src(['javascript/jq.js','javascript/mode.js'])
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(uglify())
    .pipe(rename('vendor.min.js'))
    .pipe(gulp.dest('dist/js'));
})