gulp运用

最新推荐文章于 2023-09-02 12:13:24 发布

aymfx

最新推荐文章于 2023-09-02 12:13:24 发布

阅读量310

点赞数

分类专栏： html5 文章标签：前端开发自动化

本文链接：https://blog.csdn.net/qq_29104999/article/details/60475083

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

gulp的含义

gulp 是前端开发过程中对代码进行构建的工具， 是自动化项目的构建利器； 她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；大大提高我们的工作效率

gujp工作环境安装

1.安装node.js

node -v

2. NPM命令

在安装node.js之后操作 npm -v

3.全局安装 gulp

npm install --global gulp

4.淘宝镜像加快安装

http://npm.taobao.org/
npm install -g cnpm –registry=https://registry.npm.taobao.org
以后安装全部按照cnpm命令操作

5.选择工作目录 gulp

6.初始化 npm init

会出现一个package.json文件

7.cnpm install gulp –save-dev

创建gulp工作环境（node_modules）

8.创建gulpfile.js文件

9.常用格式

gulp.task('sass', function () {
  return gulp.src('src/styles/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css/'));
});

监听

gulp.task('dist', function() {
  // src/index.html
  gulp.watch('src/index.html', ['copy']);
  gulp.watch('src/styles/*.less', ['style']);
});

编译sass文件

插件

gulp-sass

编译：

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  return gulp.src('src/styles/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css/'));
});

监听：

gulp.task('watcher', function() {
        gulp.watch('src/styles/*.scss', ['sass']);
});

压缩js文件

插件

gulp-uglify和pump

第一种方式

var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('js', function (cb) {
  pump([
        gulp.src('src/js/*.js'),
        uglify(),
        gulp.dest('dist/js/')
    ],
    cb
  );
});

第二种方式

var uglify = require('gulp-uglify');
gulp.task('jsc', function () {
    gulp.src("src/js/*.js")
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/')
  );
});

js语法检查

插件

gulp-jshint和gulp-jshint-html-reporter
注意安装：npm install --save-dev jshint gulp-jshint

第一种显示

var jshint = require(‘gulp-jshint’);

gulp.task(‘jiancha’, function() {
gulp.src(‘src/js/js.js’)
.pipe(jshint())
.pipe(jshint.reporter(‘default’));
});

显示1

第二种显示

var jshint = require('gulp-jshint');
gulp.task('lint', function() {
    gulp.src('src/js/js.js')
    .pipe(jshint())
    .pipe(jshint.reporter('gulp-jshint-html-reporter', {
      filename:'error.html',
      createMissingFolders : false  
    }));
});

显示2

压缩图片

插件

gulp-imagemin

var imagemin = require(‘gulp-imagemin’);

gulp.task(‘img1’,function(){
gulp.src(‘src/img/*jpg’)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/images/’))
}
);

压缩html

插件

gulp-minify-html

方式

var ghtml = require('gulp-minify-html');
gulp.task('html', function() {
     gulp.src('src/html.html')
    .pipe(ghtml())
    .pipe(gulp.dest('dist/html/'));
});