Изучаем Node.js и ставим Gulp (под windows)

Здесь подборка курсов от Ильи Кантора (javascript -> Nodejs -> Gulp... у него еще есть Курс по Angular.JS, Курс по React.JS, Курс по TypeScript ), gulp.js из его репозитория... А также сравинтельные статьи с Хабра, моя глобальнай установка...

Nodejs¶

javascript.ru
iliakan/playlists
github.com/iliakan

Следите за обновлениями javascript.ru
Курс JavaScript/DOM/интерфейсы
Курс по Node.JS
Курс по Angular.JS
Курс по React.JS
Курс по TypeScript
Новые курсы, мастер-классы, выпуски статей и скринкастов

In [ ]:

####Gulp

Gulp.js — потоковый сборщик проектов на JS. В данном уроке мы рассмотрим подключение и настройку gulp, а также работу с плагинами: concat, minify, rename, notify. Разберемся с watch и dest.
loftblog
Gulp yuotube
Getting Started github
gulpjs.com
GulpJS — фантастически быстрый сборщик проектов
Level Up для новичков: gulp и requirejs npm i --save-dev gulp gulp-autoprefixer gulp-concat-css gulp-connect gulp-livereload gulp-minify-css gulp-sass gulp-rename gulp-uncss gulp-uglify gulp-imagemin imagemin-pngquant

Gulp.js #2 - autoprefixer, livereload, gulp-connect
Gulp.watch: ловим ошибки правильно Работа gulp.js основана на обработке файлов как потоков данных (streams). И ошибки в потоках не всегда можно перехватить, а когда ошибка случается, то будет выброшено неперехваченное исключение и процесс завершится.

Первый пример¶

In [ ]:

#не работает livereload

var gulp = require('gulp');
var concatCss = require('gulp-concat-css'),
rename = require('gulp-rename'),
notify = require("gulp-notify"),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect'),
minifyCSS = require('gulp-minify-css');

//server connect
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});

//css
gulp.task('css', function () {
  return gulp.src('css/*.css')
  .pipe(concatCss("styles.css"))
  .pipe(autoprefixer('last 16 versions'))
  .pipe(minifyCSS())
  .pipe(rename("styles.min.css"))
  .pipe(gulp.dest('app/css'))
  .pipe(connect.reload());
});

//html
gulp.task('html', function () {
  gulp.src('app/*.html')
  .pipe(connect.reload());
});

//watch
gulp.task('watch', function () {
  gulp.watch('css/*.css', ['css'])
  gulp.watch(['app/*.html'], ['html']);
})

//default
gulp.task('default', ['connect', 'html', 'css', 'watch']);


Свернуть 

In [ ]:

C:\Users\alter_000>npm install --global gulp-cli

C:\Users\alter_000\AppData\Roaming\npm\gulp -> C:\Users\alter_000
\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
C:\Users\alter_000\AppData\Roaming\npm
`-- gulp-cli@1.2.1
  +-- archy@1.0.0
  +-- chalk@1.1.1
  | +-- ansi-styles@2.2.0
  | | `-- color-convert@1.0.0
  | +-- escape-string-regexp@1.0.5
  | +-- has-ansi@2.0.0
  | | `-- ansi-regex@2.0.0
  | +-- strip-ansi@3.0.1
  | `-- supports-color@2.0.0
  +-- fancy-log@1.2.0
  | `-- time-stamp@1.0.0
  +-- gulplog@1.0.0
  | `-- glogg@1.0.0
  |   `-- sparkles@1.0.0
  +-- interpret@1.0.0
  +-- liftoff@2.2.0
  | +-- extend@2.0.1
  | +-- findup-sync@0.3.0
  | | `-- glob@5.0.15
  | |   +-- inflight@1.0.4
  | |   | `-- wrappy@1.0.1
  | |   +-- inherits@2.0.1
  | |   +-- minimatch@3.0.0
  | |   | `-- brace-expansion@1.1.3
  | |   |   +-- balanced-match@0.3.0
  | |   |   `-- concat-map@0.0.1
  | |   +-- once@1.3.3
  | |   `-- path-is-absolute@1.0.0
  | +-- flagged-respawn@0.3.1
  | +-- rechoir@0.6.2
  | `-- resolve@1.1.7
  +-- lodash.sortby@4.2.1
  | +-- lodash._baseeach@4.1.1
  | +-- lodash._baseflatten@4.1.1
  | +-- lodash._baseiteratee@4.5.2
  | `-- lodash.rest@4.0.1
  +-- matchdep@1.0.1
  | +-- micromatch@2.3.7
  | | +-- arr-diff@2.0.0
  | | | `-- arr-flatten@1.0.1
  | | +-- array-unique@0.2.1
  | | +-- braces@1.8.3
  | | | +-- expand-range@1.8.1
  | | | | `-- fill-range@2.2.3
  | | | |   +-- is-number@2.1.0
  | | | |   +-- isobject@2.0.0
  | | | |   | `-- isarray@0.0.1
  | | | |   +-- randomatic@1.1.5
  | | | |   `-- repeat-string@1.5.4
  | | | +-- preserve@0.2.0
  | | | `-- repeat-element@1.1.2
  | | +-- expand-brackets@0.1.4
  | | +-- extglob@0.3.2
  | | +-- filename-regex@2.0.0
  | | +-- is-extglob@1.0.0
  | | +-- is-glob@2.0.1
  | | +-- kind-of@3.0.2
  | | | `-- is-buffer@1.1.3
  | | +-- normalize-path@2.0.1
  | | +-- object.omit@2.0.0
  | | | +-- for-own@0.1.3
  | | | | `-- for-in@0.1.4
  | | | `-- is-extendable@0.1.1
  | | +-- parse-glob@3.0.4
  | | | +-- glob-base@0.3.0
  | | | | `-- glob-parent@2.0.0
  | | | `-- is-dotfile@1.0.2
  | | `-- regex-cache@0.4.2
  | |   +-- is-equal-shallow@0.1.3
  | |   `-- is-primitive@2.0.0
  | `-- stack-trace@0.0.9
  +-- mute-stdout@1.0.0
  +-- pretty-hrtime@1.0.2
  +-- semver-greatest-satisfied-range@1.0.0
  | +-- semver@4.3.6
  | `-- semver-regex@1.0.0
  +-- tildify@1.1.2
  | `-- os-homedir@1.0.1
  +-- v8flags@2.0.11
  | `-- user-home@1.1.1
  +-- wreck@6.3.0
  | +-- boom@2.10.1
  | `-- hoek@2.16.3
  `-- yargs@3.32.0
    +-- camelcase@2.1.0
    +-- cliui@3.1.0
    | `-- wrap-ansi@1.0.0
    +-- decamelize@1.2.0
    +-- os-locale@1.4.0
    | `-- lcid@1.0.0
    |   `-- invert-kv@1.0.0
    +-- string-width@1.0.1
    | +-- code-point-at@1.0.0
    | | `-- number-is-nan@1.0.0
    | `-- is-fullwidth-code-point@1.0.0
    +-- window-size@0.1.4
    `-- y18n@3.2.0

In [ ]:

F:\stradorusite\GULP-projects\first_learn>npm install --save-dev gulp
npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases
. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs version 3 and before will fail on newer node releases
. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN first_learn@1.0.0 No repository field.

Level Up для новичков: gulp и requirejs¶

В этой статье все дополнения ставятся сразу, я повторил установку...

In [ ]:

F:\stradorusite\GULP-projects\first_learn>npm i --save-dev 
gulp 
gulp-autoprefixer 
gulp-concat-css 
gulp-connect 
gulp-livereload 
gulp-minify-css 
gulp-sass 
gulp-rename 
gulp-uncss 
gulp-uglify  
gulp-imagemin  
imagemin-pngquant

"На самостоятельное изучение оставляю полный код моего gulpfile.js"¶

In [ ]:

 var gulp = require('gulp');
 var concatCss = require('gulp-concat-css');
 var minifyCss = require('gulp-minify-css');
 var rename = require(«gulp-rename»);
 var autoprefixer = require('gulp-autoprefixer');
 var livereload = require('gulp-livereload');
 var connect = require('gulp-connect');
 var uglify = require('gulp-uglify');

 var sass = require('gulp-sass');
 var imagemin = require('gulp-imagemin');
 var pngquant = require('imagemin-pngquant');

 // Основные
 gulp.task('css', function () {
 gulp.src('./assets/css/*.css')
 .pipe(concatCss(«style.min.css»))
 .pipe(minifyCss({compatibility: 'ie8'}))
 .pipe(autoprefixer({
 browsers: ['last 10 versions'],
 cascade: false
 }))
 .pipe(gulp.dest('./public/css/'));

 gulp.src('./assets/css/fight/*.css')
 .pipe(concatCss(«fight.min.css»))
 .pipe(minifyCss({compatibility: 'ie8'}))
 .pipe(autoprefixer({
 browsers: ['last 10 versions'],
 cascade: false
 }))
 .pipe(gulp.dest('./public/css/'))
 .pipe(connect.reload());
 });

 gulp.task('sass', function () {
 gulp.src('./assets/sass/*.ccss')
 .pipe(sass(«style.css»))
 .pipe(minifyCss(''))
 .pipe(rename(«style.sass.min.css»))
 .pipe(autoprefixer({
 browsers: ['last 10 versions'],
 cascade: false
 }))
 .pipe(gulp.dest('./public/css/'))
 .pipe(connect.reload());
 });

 gulp.task('html',function(){
 gulp.src('./assets/*.html')
 .pipe(gulp.dest('./public/'))
 .pipe(connect.reload());
 });

 gulp.task('fonts',function(){
 gulp.src('./assets/font/**/*')
 .pipe(gulp.dest('./public/font/'))
 .pipe(connect.reload());
 });

 gulp.task('js',function(){
 gulp.src('./assets/js/*.js')
 .pipe(uglify())
 .pipe(gulp.dest('./public/js/'))
 .pipe(connect.reload());
 });
 gulp.task('jslibs',function(){
 gulp.src('./assets/js/libs/*.js')
 .pipe(uglify())
 .pipe(gulp.dest('./public/js/libs/'))
 .pipe(connect.reload());
 });
 gulp.task('jsmods',function(){
 gulp.src('./assets/js/modules/**/*.js')
 .pipe(uglify())
 .pipe(gulp.dest('./public/js/modules/'))
 .pipe(connect.reload());
 });

 gulp.task('img',function(){
 gulp.src('./assets/img/*')
 .pipe(imagemin({
 progressive: true,
 svgoPlugins: [{removeViewBox: false}],
 use: [pngquant()]
 }))
 .pipe(gulp.dest('./public/img/'))
 .pipe(connect.reload());
 });

 // Connect
 gulp.task('connect', function() {
 connect.server({
 root: 'public',
 livereload: true
 });
 });

 // Watch
 gulp.task('watch',function(){
 gulp.watch("./assets/css/**/*.css", [«css»]);
 gulp.watch("./assets/*.html", [«html»]);
 gulp.watch("./assets/js/*.js", [«js»]);
 gulp.watch("./assets/js/libs/*.js", [«jslibs»]);
 gulp.watch("./assets/js/modules/**/*.js", [«jsmods»]);
 });

 // Default
 gulp.task('default', [«html», «css», «sass», «js»,«jslibs», «jsmods», «connect», «watch»]);

Посты чуть ниже также могут вас заинтересовать