ホームページ > 記事 > ウェブフロントエンド > Gulp は、front-end_html/css_WEB-ITnose を自動化します

Gulp は、front-end_html/css_WEB-ITnose を自動化します

WBOYオリジナル: 2016-06-21 08:55:541058ブラウズ

「1. なぜ grunt を使用するのか、2. なぜ grunt をやめて gulp に切り替えるのか、3. なぜ gulp と grunt をやめて npmscripts に切り替えるのか。フロントエンドは諦めます」 —— Situ Zhengmei

フロントエンド（ジョーク）の世界の発展は飛躍的に進んでおり、自分が追いつけなくなるのではないかと常々感じています。いつの時代もテクノロジーのトレンドに取り残されていて悲しいです

こんな時期に記事を公開することにしました gulpのチュートリアルは当初の意図ではありませんでした。初めてgulpを使ったのは、 1 年前、この投稿は 1 か月以上下書きボックスに眠っていましたが、公開しないと古くなってしまう可能性があります。公開した場合、何に使用しますか。 gulp?

sass のコンパイル

圧縮 CSS のマージと最適化
圧縮 js の検証
画像の最適化
ファイルフィンガープリントの追加(md5)
コンポーネント化されたヘッダー下部 (htmlを含む)
リアルタイム自動更新...

簡単な解決策をお勧めします。 :

タオバオ npm ミラーを使用します

// 设置代理npm config set proxy="http://127.0.0.1:1080"// 删除代理npm config delete proxy

「これは完全な npmjs.org ミラーです。公式バージョン (読み取り専用) の代わりに使用できます。同期頻度は現在 10 分です。可能な限り公式サービスと同期していることを確認するために一度。」 - タオバオチームは

次に、gulp チュートリアルを開始します:

準備: node.js をインストールします ( TLS バージョンを推奨)、システムを再起動します。

npm config set registry="https://registry.npm.taobao.org"

1. gulp をグローバルにインストールします。

└── src/ 🎜>

§── build/ .html コンポーネント

npm install gulp -g

§── sass/ .scss .sass ファイル

§── css/ .css ファイル

§── js/ .js ファイル

└── img/ 画像

└── dist/ 出力ディレクトリ

└── package.json

└──

gulpfile.js

3. package.json

については、npm init を使用して設定できます。初期コンテンツを直接記述することをお勧めします:

完全な package.json (他の人のオープンソースプロジェクトなど) の場合は、プロジェクト全体で npm install を実行して、宣言されたすべてのプラグインモジュールをインストールするだけです。 package.json ファイル内。

4. gulp をプロジェクトディレクトリにインストールします

—save-dev このパラメーターは、プラグイン情報を package.json に自動的に更新し、devDependency 属性も一緒にインストールされます。プラグインの依存関係はアンインストールにより変更されます。

{  "name": "gulp-build",  "version": "1.0.0",  "description": "Gulp.js",  "private": true}

PS. Windows 7 以降の場合は、Shift キーを押しながら右クリックして、[ここでコマンドウィンドウを開く] を選択します。 cd コマンドを使用してディレクトリを見つける手間を省きます。

5. よく使用するプラグインをプロジェクトディレクトリにインストールします。

PS これは、前の手順

npm install gulp --save-dev

プラグインと同時に実行できます。詳細な使用法については、対応する GitHub ホームページを参照してください。

上記の 2 つのインストール操作により、プロジェクトディレクトリに

node_modules

フォルダーが生成され、対応するプラグインがここにあります。

Windows ユーザーは、このフォルダーが

npm install gulp-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev

削除、コピー、移動

できず、「名前が長すぎるため、リサイクルに入れることができません」というメッセージが表示される場合があることに注意してください。 bin」、「ソースファイル名がファイルシステムでサポートされている長さを超えています。より短いパス名の場所に移動してください。」など。削除する方法は簡単で、WinRARの「圧縮ファイルに追加」を使用し、圧縮オプションで「圧縮後にソースファイルを削除する」にチェックを入れ、確認後に削除します。

6. API 私を見ないで、見てください: http://www.gulpjs.com.cn/docs/api/

7.コード例

コード内の ?rev=@@hash は、gulp-rev-append プラグインのフィンガープリント ID です。コード内の

@@include(‘build/header.html’) は HTML ファイルを挿入できます。

8. 私の gulpfile.js、設定と説明

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>嘿嘿嘿</title><link href="css/m.base.css?rev=@@hash" rel="stylesheet" type="text/css" /><link href="css/jquery.fullPage.css?rev=@@hash" rel="stylesheet" type="text/css" /><link href="css/mobile.css?rev=@@hash" rel="stylesheet" type="text/css" /></head><body>

<!-- common js --><script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><script type="text/javascript" src="js/main.js?rev=@@hash"></script><script></script></body></html>

9. gulp の使い方

@@include('build/header.html')<div class="wrap">内容</div>@@include('build/footer.html')

もうすぐ 2 月に間に合います4年 29日に急遽投稿。

Gulp でフロントエンドを自動化する

/*! * gulp * $ npm install gulp gulp-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev */// Load pluginsvar gulp = require('gulp'), // 必须先引入gulp插件    del = require('del'),  // 文件删除    sass = require('gulp-sass'), // sass 编译    cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件通过管道    uglify = require('gulp-uglify'), // js 压缩    rename = require('gulp-rename'), // 重命名    concat = require('gulp-concat'), // 合并文件    notify = require('gulp-notify'), // 相当于 console.log()    filter = require('gulp-filter'), // 过滤筛选指定文件    jshint = require('gulp-jshint'), // js 语法校验    rev = require('gulp-rev-append'), // 插入文件指纹（MD5）    cssnano = require('gulp-cssnano'), // CSS 压缩    imagemin = require('gulp-imagemin'), // 图片优化    browserSync = require('browser-sync'), // 保存自动刷新    fileinclude = require('gulp-file-include'), // 可以 include html 文件    autoprefixer = require('gulp-autoprefixer'); // 添加 CSS 浏览器前缀// sassgulp.task('sass', function() {  return gulp.src('src/sass/**/*.scss')  // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道    .pipe(cached('sass'))  // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存）    .pipe(sass({outputStyle: 'expanded'})) // 编译 sass 并设置输出格式    .pipe(autoprefixer('last 5 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本    .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下（不影响此时管道里的文件流）    .pipe(rename({suffix: '.min'})) // 对管道里的文件流添加 .min 的重命名    .pipe(cssnano()) // 压缩 CSS    .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本});// css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本）gulp.task('css', function() {  return gulp.src('src/css/**/*.css')    .pipe(cached('css'))    .pipe(gulp.dest('dist/css')) // 把管道里的所有文件输出到 dist/css 目录    .pipe(filter(['*', '!*.min.css'])) // 筛选出管道中的非 *.min.css 文件    .pipe(autoprefixer('last 5 version'))    .pipe(gulp.dest('dist/css')) // 把处理过的 css 输出到 dist/css 目录    .pipe(rename({suffix: '.min'}))    .pipe(cssnano())    .pipe(gulp.dest('dist/css'))});// styleReload （结合 watch 任务，无刷新CSS注入）gulp.task('styleReload', ['sass', 'css'], function() {  return gulp.src(['dist/css/**/*.css'])    .pipe(cached('style'))    .pipe(browserSync.reload({stream: true})); // 使用无刷新 browserSync 注入 CSS});// script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本）gulp.task('script', function() {  return gulp.src(['src/js/**/*.js'])    .pipe(cached('script'))    .pipe(gulp.dest('dist/js'))    .pipe(filter(['*', '!*.min.js'])) // 筛选出管道中的非 *.min.js 文件    // .pipe(jshint('.jshintrc'))    // .pipe(jshint.reporter('default'))    // .pipe(concat('main.js'))    // .pipe(gulp.dest('dist/js'))    .pipe(rename({suffix: '.min'}))    .pipe(uglify())    .pipe(gulp.dest('dist/js'))});// imagegulp.task('image', function() {  return gulp.src('src/img/**/*.{jpg,jpeg,png,gif}')    .pipe(cached('image'))    .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true, multipass: true})) // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化    .pipe(gulp.dest('dist/img'))});// html 编译 HTML 文件gulp.task('html', function () {  gulp.src('src/*.html')    .pipe(fileinclude()) // include html    .pipe(rev()) // 生成并插入 MD5    .pipe(gulp.dest('dist/'));});// clean 清空 dist 目录gulp.task('clean', function() {  return del('dist/**/*');});// build 需要插入资源指纹（MD5），html 最后执行gulp.task('build', ['sass', 'css', 'script', 'image'], function () {  gulp.start('html');});// default 默认任务，依赖清空任务gulp.task('default', ['clean'], function() {  gulp.start('build');});// watch 开启本地服务器并监听gulp.task('watch', function() {  browserSync.init({    server: {      baseDir: 'dist' // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器    }  });  // 监控 SASS 文件，有变动则执行CSS注入  gulp.watch('src/sass/**/*.scss', ['styleReload']);  // 监控 CSS 文件，有变动则执行CSS注入  gulp.watch('src/css/**/*.css', ['styleReload']);  // 监控 js 文件，有变动则执行 script 任务  gulp.watch('src/js/**/*.js', ['script']);  // 监控图片文件，有变动则执行 image 任务  gulp.watch('src/img/**/*', ['image']);  // 监控 html 文件，有变动则执行 html 任务  gulp.watch('src/**/*.html', ['html']);  // 监控 dist 目录下除 css 目录以外的变动（如js，图片等），则自动刷新页面  gulp.watch(['dist/**/*', '!dist/css/**/*']).on('change', browserSync.reload);});

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS 特殊効果は HTML テーブルを実装してコンテンツの一部を表示し、マウスを上に動かすとコンテンツ全体が表示されます。 _html/css_WEB-ITnose次の記事：CSS 特殊効果は HTML テーブルを実装してコンテンツの一部を表示し、マウスを上に動かすとコンテンツ全体が表示されます。 _html/css_WEB-ITnose

続きを見る