gulp using

Veröffentlicht am

use gulp once again, there are some problems

so, to remember is so important

base
some place excute

  • npm install –global gulp-cli
    First
    cmd:enter project package (gulpfile.js room)
  • cd E:\Moudule
    Second
    having installed gulp globally
  • npm rm –global gulp to make sure old version doesn’t collide with gulp-cli
  • (and then I have to excute npm install -g gulp-cli…at the beginning I didn’t so below is my try and try!!! In the end,summary to how to use gulp)
    Third
    create package.json
  • npm init
  • name(…):@pinglikethinking/moudule name not to use npm install…
  • version(…):1.0.0 to set a version
  • …..these can enter to next step.
  • y
    now out of that linecoding
    Fourth
    create gulpfile.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var gulp = require('gulp'),
       uglify = require('gulp-uglify'),
       jshint = require('gulp-jshint'),
       concat = require('gulp-concat');

    gulp.task('js', function () {
       return gulp.src('js/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('default'))
          .pipe(uglify())
          .pipe(concat('app.js'))
          .pipe(gulp.dest('build'));
    });

Fifth

  • npm install –save-dev gulp install gulp in project devDependencies
  • npm install –save-dev gulp-uglify install gulp-uglify in project devDependencies
  • npm install –save-dev gulp-jshint install gulp-jshint in project devDependencies
  • npm install –save-dev gulp-concat install gulp-uglify in project devDependencies
    Sixth
    Run gulp task
  • gulp js

    the end API

    npmjs.com

    wait a minute, there is a problem

    “It is not the command within”

Go on Go on Go on!
dos:

  • npm root -g =>prex=”npmglobalpath”
    add npmglobalpath to Path…

    But it can’t work,because I have set…

    continue……
    enter that root path(D:\users\My\AppData\Roaming\npm) because my users is in “D” has “gulp”and”gulp.cmd”…I didn’t have.So why?
    Now install gulp global! because I have install gulp,so like this to excute
  • npm install -g gulp-cli

    oh!there is it—-gulp.cmd!

    rerun cmd to excute gulp

    I have to say that because I have removed global gulp at starting!”npm rm –global gulp”.Only when there is collision,we have to

  • remove global gulp
  • npm rm –global gulp
  • remove gulp of our project
  • npm rm gulp –save-dev
  • Then,install global gulp
  • npm install -g gulp-cli OR npm install “gulpjs/gulp#4.0” -g
  • And install project gulp
  • npm install gulp –save-dev OR npm install “gulpjs/gulp#4.0” –save-dev

summary

IF VERSION COLLISION

  • remove global gulp
  • npm rm –global gulp
  • remove gulp of our project
  • npm rm gulp –save-dev
  • Then,install global gulp
  • npm install -g gulp-cli OR npm install “gulpjs/gulp#4.0” -g
  • And install project gulp
  • npm install gulp –save-dev OR npm install “gulpjs/gulp#4.0” –save-dev
    IF NOT VERSION COLLISION AND AND THERE IS GLOBAL GULP!!!”GULP/GULP.CMD/Path” ALL CORRECT-THEN—-
    First
    create package.json
  • npm init
  • name(…):@pinglikethinking/moudule name not to use npm install…
  • version(…):1.0.0 to set a version
  • …..these can enter to next step.
  • y
    package.json
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
      "name": "@pinglikethinking/moudule",
      "version": "1.0.0",
      "description": "the version used to test",
      "main": "gulpfile.js",
      "command": "gulp",
      "dependencies": {},
      "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-concat": "^2.6.0",
        "gulp-jshint": "^2.0.1",
        "gulp-uglify": "^1.5.3"
      },
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "pinglikethinking",
      "license": "ISC"
    }

Second
create gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// IMPORT gulp
var gulp = require('gulp');
 
// import components
var htmlmin = require('gulp-htmlmin'), //html min
    imagemin = require('gulp-imagemin'),//img min
    pngcrush = require('imagemin-pngcrush'),
    minifycss = require('gulp-minify-css'),//css min
    jshint = require('gulp-jshint'),//js hint
    uglify = require('gulp-uglify'),//js min
    concat = require('gulp-concat'),//files concat
    rename = require('gulp-rename'),//files rename
    notify = require('gulp-notify');//tips
 
// min html
gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dest'))
    .pipe(notify({ message: 'html task ok' }));
 
});
 
// min img
gulp.task('img', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('./dest/images/'))
    .pipe(notify({ message: 'img task ok' }));
});
 
// concat、min、rename css
gulp.task('css', function() {
  return gulp.src('src/css/*.css')
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dest/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dest/css'))
    .pipe(notify({ message: 'css task ok' }));
});
 
// lint js
gulp.task('lint', function() {
  return gulp.src('src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(notify({ message: 'lint task ok' }));
});
 
// concat、min js file
gulp.task('js', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dest/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dest/js'))
    .pipe(notify({ message: 'js task ok' }));
});
 
// default task
gulp.task('default', function(){
  gulp.run('img', 'css', 'lint', 'js', 'html');
 
  // watch html change
  gulp.watch('src/*.html', function(){
    gulp.run('html');
  });
 
  // Watch .css files
  gulp.watch('src/css/*.css', ['css']);
 
  // Watch .js files
  gulp.watch('src/js/*.js', ['lint', 'js']);
 
  // Watch image files
  gulp.watch('src/images/*', ['img']);
});

Third

  • npm install –save-dev gulp install gulp in project devDependencies
  • npm install –save-dev gulp-uglify install gulp-uglify in project devDependencies
  • npm install –save-dev gulp-jshint install gulp-jshint in project devDependencies
  • npm install –save-dev gulp-concat install gulp-uglify in project devDependencies
    can install together
  • gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify –save-dev
  • gulp-clean-css(warning tips)
  • all this due to your needs
    Fourth
    Run gulp task
  • gulp

    FINALLY!!!