您好,欢迎来到吉趣旅游网。
搜索
您的当前位置:首页Gulp.js基础入门教程_html/css_WEB-ITnose

Gulp.js基础入门教程_html/css_WEB-ITnose

来源:吉趣旅游网

  • 创建项目文件夹

  • 进入项目文件夹

  • 初始化项目

    使用npm命令: npm init ,根据提示完成。

  • 安装 Gulp

    进入项目文件夹,使用Node的包管理命令npm进行安装.

  • 全局安装
  • npm install -g gulp

  • 项目依赖中安装
  • npm install --save-dev gulp

    创建Gulp配置文件

  • 在项目根目录新建配置文件 gulpfile.js
  • 设置配置信息

    以常见的Gulp插件为例,如下:

    1. js代码校验(gulp-jshint)
    2. 合并js文件(gulp-concat)
    3. 压缩js代码(gulp-uglify)
    4. sass的编译(gulp-sass)
    5. less的编译(gulp-less)
    6. 压缩css(gulp-minify-css)
    7. 重命名(gulp-rename)

    这些插件的安装命令如下:

    npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename --save-dev

    完整配置文件:

    // 引入 gulpvar gulp = require('gulp');// 引入组件var jshint = require('gulp-jshint');var concat = require('gulp-concat');var uglify = require('gulp-uglify');var sass = require('gulp-sass');var less = require('gulp-less');var minifycss = require('gulp-minify-css');var rename = require('gulp-rename');// 检查js脚本gulp.task('lint', function() { gulp.src('./src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default'));});// 合并,压缩js文件gulp.task('scripts', function() { gulp.src('./src/js/*.js') //合并js文件 .pipe(concat('all.js')) //给文件添加.min后缀 .pipe(rename({ suffix: '.min' })) //压缩脚本文件 .pipe(uglify()) .pipe(gulp.dest('./dist/js'));});// 编译sassgulp.task('sass', function() { gulp.src('./src/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css'));});// 编译lessgulp.task('sass', function() { gulp.src('./src/less/*.less') .pipe(less()) .pipe(gulp.dest('./css'));});// 压缩cssgulp.task('style', function() { gulp.src('./src/css/*.css') .pipe(gulp.dest('./dist/style')) .pipe(rename('all.min.css')) .pipe(minifycss()) .pipe(gulp.dest('./dist/style'));});// 默认任务gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 监听文件变化 gulp.watch('./src/js/*.js', function(){ gulp.run('lint', 'scripts'); }); gulp.watch('./src/sass/*.scss', function(){ gulp.run('sass'); }); gulp.watch('./src/less/*.less', function(){ gulp.run('less'); }); gulp.watch('./src/css/*.css', function(){ gulp.run('style'); });});

    本作品由 SeayXu 创作,采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。

    基于http://git.seay.me上的作品创作。

    可自由转载、引用,但需署名作者且注明文章出处,并以相同方式共享。

    本文链接:

    Gulp.js基础入门教程

    Copyright © 2019- jqkq.cn 版权所有 赣ICP备2024042794号-4

    违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务